@tonycodes-ui/mortar 0.12.0 → 0.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/CHANGELOG.md +16 -39
  2. package/DESIGN.md +1 -1
  3. package/catalog.json +413 -377
  4. package/cli/audit.mjs +152 -0
  5. package/dist/agent-data.json +1 -1
  6. package/dist/application.d.ts +30 -5
  7. package/dist/application.js +20 -8
  8. package/dist/index.d.ts +1 -1
  9. package/dist/inspection.js +17 -1
  10. package/dist/internal.d.ts +15 -1
  11. package/dist/internal.js +12 -1
  12. package/dist/marketing.d.ts +3 -2
  13. package/dist/marketing.js +2 -6
  14. package/dist/primitives.js +20 -11
  15. package/docs/agents.md +21 -18
  16. package/docs/theming.md +72 -1
  17. package/package.json +1 -1
  18. package/skills/mortar/SKILL.md +1 -1
  19. package/src/application.css +95 -1
  20. package/src/application.tsx +88 -19
  21. package/src/data.css +58 -2
  22. package/src/foundation.css +10 -0
  23. package/src/index.ts +3 -0
  24. package/src/inspection.tsx +15 -0
  25. package/src/internal.tsx +93 -2
  26. package/src/marketing.tsx +4 -74
  27. package/src/primitives.tsx +38 -19
package/dist/agent-data.json CHANGED
@@ -1 +1 @@
1
- {"schemaVersion":1,"version":"0.12.0","taxonomy":{"kits":[{"id":"foundation","title":"Foundation","description":"Controls, elements and layout primitives every Mortar screen is built from.","categories":[{"id":"actions","title":"Actions and navigation","thumbnail":"ButtonGroup","components":["Button","ButtonGroup","ActionLink","Dropdown","Tabs"]},{"id":"forms","title":"Form controls","thumbnail":"Input","components":["Input","TextArea","Select","Listbox","Combobox","Fieldset","Checkbox","RadioGroup","Switch","SegmentedControl","FilterChip","ErrorSummary"]},{"id":"layout","title":"Layout","thumbnail":"Card","components":["Card","Divider","MediaObject","Stack","Container","Text"]},{"id":"elements","title":"Elements","thumbnail":"Badge","components":["Avatar","AvatarGroup","Badge","Kbd","ProgressBar","CheckList"]},{"id":"feedback","title":"Feedback and overlays","thumbnail":"Notice","components":["Notice","EmptyState","Toast","Toaster","Modal"]},{"id":"theming","title":"Theming","thumbnail":null,"components":["ThemeProvider","AppearanceControl"]}]},{"id":"application","title":"Application UI","description":"Shells, data display, lists and overlays for product screens.","categories":[{"id":"shells","title":"Shells and headings","thumbnail":"PageHeading","components":["AppShell","StackedShell","PageHeading","SectionHeading"]},{"id":"navigation","title":"Navigation","thumbnail":"Navbar","components":["Navbar","Sidebar","Breadcrumbs","TabNav","ProgressSteps","Pagination"]},{"id":"lists","title":"Lists and tables","thumbnail":"StackedList","components":["DataTable","Table","GridList","StackedList","ActivityFeed"]},{"id":"data","title":"Data display","thumbnail":"MetricGroup","components":["DescriptionList","AttachmentList","Calendar","MetricGroup","CodeBlock","PreviewFrame"]},{"id":"forms","title":"Forms and settings","thumbnail":"SettingsSection","components":["SettingsSection","SaveBar","ActionPanel","CommentComposer"]},{"id":"auth","title":"Sign-in and registration","thumbnail":"SignInPanel","components":["AuthLayout","SignInPanel","ProviderButtons","PasswordInput","CodeInput"]},{"id":"overlays","title":"Overlays","thumbnail":null,"components":["SlideOver","ConfirmDialog","CommandPalette"]}]},{"id":"marketing","title":"Marketing UI","description":"Page sections for landing, pricing and company pages.","categories":[{"id":"sections","title":"Page sections","thumbnail":"Hero","components":["Hero","HeaderSection","FeatureGrid","FeatureSection","BentoGrid","ProcessSteps","CallToAction","Section"]},{"id":"social-proof","title":"Social proof","thumbnail":"StatGroup","components":["Testimonial","TestimonialGrid","LogoCloud","StatGroup","TeamGrid"]},{"id":"pricing","title":"Pricing","thumbnail":"Pricing","components":["Pricing","PlanComparison","FAQ"]},{"id":"chrome","title":"Headers, footers and forms","thumbnail":"Newsletter","components":["Banner","MarketingHeader","Footer","MarketingPage","Newsletter","ContactSection","NotFound"]},{"id":"showcase","title":"Content and showcase","thumbnail":"ChatPreview","components":["ContentSection","PostList","MockWindow","NetworkIllustration","ChatPreview"]}]},{"id":"docs","title":"Documentation","description":"A docs shell with search, navigation and rich content blocks.","categories":[{"id":"navigation","title":"Shell and navigation","thumbnail":"LinkCards","components":["DocsShell","SearchTrigger","SearchDialog","PagerLinks","LinkCards"]},{"id":"content","title":"Content","thumbnail":"Callout","components":["Prose","Callout","Steps","CodeTabs","FileTree","ApiEndpoint","Release","PageFeedback"]}]},{"id":"ecommerce","title":"Ecommerce","description":"Product lists, product pages, carts and order summaries for storefronts.","categories":[{"id":"products","title":"Products","thumbnail":"ProductList","components":["ProductList","ProductOverview","ProductQuickView","ProductFilters","ProductReviews"]},{"id":"checkout","title":"Cart and checkout","thumbnail":"OrderSummary","components":["ShoppingCart","OrderSummary","OrderHistory"]}]}]},"templates":[{"id":"saas-landing","title":"Landing page","description":"Hero, features, pricing and sign-up for a SaaS product.","kind":"Marketing","components":["AppearanceControl","Badge","CallToAction","ChatPreview","CheckList","CodeBlock","FeatureGrid","FeatureSection","Footer","Hero","LogoCloud","MarketingHeader","MockWindow","Pricing","ProcessSteps","Section","SignInPanel","Stack","StackedList","Text"]},{"id":"pricing","title":"Pricing page","description":"Plans, comparison table, questions and a call to action.","kind":"Marketing","components":["AppearanceControl","CallToAction","FAQ","Footer","HeaderSection","MarketingHeader","PlanComparison","Pricing"]},{"id":"about","title":"About page","description":"Story, team, stats and customers.","kind":"Marketing","components":["AppearanceControl","CallToAction","ContentSection","Footer","HeaderSection","LogoCloud","MarketingHeader","MockWindow","StatGroup","TeamGrid"]},{"id":"project-workspace","title":"Project workspace","description":"Multi-column app screen with a schedule and activity.","kind":"Application","components":["ActivityFeed","AppShell","Avatar","Badge","Button","Calendar","DescriptionList","GridList","PageHeading","SectionHeading","Stack"]},{"id":"settings","title":"Settings screen","description":"Tabs, grouped fields, a danger zone and unsaved changes.","kind":"Application","components":["ActionLink","ActionPanel","AppShell","Button","Combobox","DescriptionList","Fieldset","Input","PageHeading","SaveBar","SettingsSection","Stack","Switch","Tabs"]},{"id":"sign-in","title":"Sign in","description":"Email and password, remember me, a reset link and providers.","kind":"Application","components":["AuthLayout","Button","Checkbox","Divider","Input","Notice","PasswordInput","ProviderButtons","Stack"]},{"id":"sign-in-split","title":"Sign in, split screen","description":"The same sign-in beside a customer quote.","kind":"Application","components":["AuthLayout","Button","Checkbox","Divider","Input","Notice","PasswordInput","ProviderButtons","Stack","Testimonial"]},{"id":"sign-up","title":"Sign up","description":"Name, email, a new password with its rules, terms and providers.","kind":"Application","components":["AuthLayout","Button","Checkbox","Divider","Input","Notice","PasswordInput","ProviderButtons"]},{"id":"forgot-password","title":"Forgot password","description":"Request a reset link without revealing whether an account exists.","kind":"Application","components":["AuthLayout","Button","Input","Notice"]},{"id":"check-email","title":"Check your email","description":"What happens after a link is sent, with a rate-limited resend.","kind":"Application","components":["AuthLayout","Button","Stack","Text"]},{"id":"reset-password","title":"Reset password","description":"A new password, confirmed, with its requirements up front.","kind":"Application","components":["AuthLayout","Button","Notice","PasswordInput"]},{"id":"verify-email","title":"Verify email","description":"A one-time code, resend countdown and a change-email link.","kind":"Application","components":["AuthLayout","Button","CodeInput","Notice","Stack","Text"]},{"id":"two-factor","title":"Two-factor sign-in","description":"An authenticator code with a recovery-code fallback.","kind":"Application","components":["AuthLayout","Button","CodeInput","Notice"]},{"id":"product-page","title":"Product page","description":"Gallery, options, add to bag and related products.","kind":"Ecommerce","components":["Breadcrumbs","Container","Footer","MarketingHeader","ProductList","ProductOverview","ProductReviews","SectionHeading","Stack"]},{"id":"cart-page","title":"Shopping bag","description":"Editable bag lines beside the order summary.","kind":"Ecommerce","components":["ActionLink","Button","Container","Footer","MarketingHeader","OrderSummary","PageHeading","ShoppingCart","Stack"]},{"id":"category-page","title":"Category page","description":"Category previews, filters, products and incentives.","kind":"Ecommerce","components":["Container","EmptyState","FeatureGrid","Footer","GridList","MarketingHeader","PageHeading","ProductFilters","ProductList","SectionHeading","Stack"]},{"id":"checkout-page","title":"Checkout","description":"Contact, shipping, delivery and payment with a live total.","kind":"Ecommerce","components":["Button","Container","Fieldset","Footer","Input","MarketingHeader","OrderSummary","PageHeading","RadioGroup","Stack","StackedList"]},{"id":"order-history","title":"Order history","description":"Past orders with status and items.","kind":"Ecommerce","components":["Container","Footer","MarketingHeader","OrderHistory","PageHeading","Stack"]}],"exports":{"values":["ActionLink","ActionPanel","ActivityFeed","ApiEndpoint","AppShell","AppearanceControl","AttachmentList","AuthLayout","Avatar","AvatarGroup","Badge","Banner","BentoGrid","Breadcrumbs","Button","ButtonGroup","Calendar","CallToAction","Callout","Card","ChatPreview","CheckList","Checkbox","CodeBlock","CodeInput","CodeTabs","Combobox","CommandPalette","CommentComposer","ConfirmDialog","ContactSection","Container","ContentSection","DataTable","DescriptionList","Divider","DocsShell","Dropdown","EmptyState","ErrorSummary","FAQ","FeatureGrid","FeatureSection","Fieldset","FileTree","FilterChip","Footer","GridList","HeaderSection","Hero","Input","Kbd","LinkCards","Listbox","LogoCloud","MarketingHeader","MarketingPage","MediaObject","MetricGroup","MockWindow","Modal","Navbar","NetworkIllustration","Newsletter","NotFound","Notice","OrderHistory","OrderSummary","PageFeedback","PageHeading","PagerLinks","Pagination","PasswordInput","PlanComparison","PostList","PreviewFrame","Pricing","ProcessSteps","ProductFilters","ProductList","ProductOverview","ProductQuickView","ProductReviews","ProgressBar","ProgressSteps","Prose","ProviderButtons","RadioGroup","Release","SaveBar","SearchDialog","SearchTrigger","Section","SectionHeading","SegmentedControl","Select","SettingsSection","ShoppingCart","Sidebar","SignInPanel","SlideOver","Stack","StackedList","StackedShell","StatGroup","Steps","Switch","TabNav","Table","Tabs","TeamGrid","Testimonial","TestimonialGrid","Text","TextArea","ThemeProvider","Toast","Toaster"],"types":["ActionPanelProps","ActivityFeedProps","AppShellProps","Appearance","Attachment","AttachmentListProps","AuthLayoutProps","AvatarGroupProps","AvatarProps","Brand","BrandAppearanceTokens","BrandDefinition","BreadcrumbItem","BreadcrumbsProps","ButtonGroupItem","ButtonProps","CalendarEvent","CalendarProps","CalendarView","CardProps","CartItem","ChatMessage","CheckListProps","ChoiceOption","CodeInputProps","CommandItem","CommandPaletteProps","ContainerProps","DataTableColumn","DataTableProps","Density","DescriptionListProps","DividerProps","DocsShellProps","DropdownItem","ErrorSummaryItem","FileNode","FilterChipProps","FilterFacet","FlyoutItem","GridListItem","GridListProps","HeaderLink","HeadingLevel","InputProps","ItemGroup","KbdProps","LinkAction","LinkItem","MediaObjectProps","MetricGroupProps","NavbarProps","NavigationItem","NetworkConnection","NetworkNode","Order","PageHeadingProps","PaginationProps","PasswordInputProps","PasswordRequirement","PasswordStrength","PricingExtra","PricingPlan","ProductCard","ProductImage","ProductListProps","ProductOption","ProductOverviewProps","ProgressBarProps","ProgressStep","ProgressStepsProps","ProseProps","ProviderButtonsProps","Review","SectionHeadingProps","SectionProps","SectionTone","SettingsSectionProps","ShoppingCartProps","SidebarProps","SignInPanelProps","SignInProvider","SlideOverProps","SortDirection","StackProps","StackedListItem","StackedListProps","StackedShellProps","TabNavItem","TabNavProps","TableProps","TableSort","TextProps","ThemeProviderProps","ToastAction","ToastItem","Tone"]},"examples":{"ActionLink":"import { ActionLink } from \"@tonycodes-ui/mortar\";\n\n<div className=\"m-actions\">\n <ActionLink {...action} />\n</div>","ActionPanel":"import { ActionPanel, Button, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"lg\">\n <ActionPanel\n title=\"Manage subscription\"\n description=\"Change your plan, update billing details or download invoices.\"\n action={<Button variant=\"secondary\">Change plan</Button>}\n />\n <ActionPanel\n title=\"Delete account\"\n description=\"Permanently remove your account and all of its data. This cannot be undone.\"\n tone=\"danger\"\n action={<Button variant=\"danger\">Delete account</Button>}\n />\n</Stack>","ActivityFeed":"import { ActivityFeed, Avatar } from \"@tonycodes-ui/mortar\";\n\n<ActivityFeed\n label=\"Recent activity\"\n items={[\n {\n id: \"1\",\n title: \"Deployment completed\",\n description: \"Production is up to date.\",\n time: \"2 minutes ago\",\n tone: \"success\",\n },\n {\n id: \"2\",\n title: \"Ana Kovač commented\",\n time: \"1 hour ago\",\n actor: <Avatar name=\"Ana Kovač\" size=\"sm\" />,\n body: \"Can we move the release to Thursday? Support is short-staffed on Friday.\",\n },\n ]}\n/>","ApiEndpoint":"import { ApiEndpoint, CodeTabs } from \"@tonycodes-ui/mortar\";\n\n<ApiEndpoint\n method=\"POST\"\n path=\"/v3/deployments\"\n title=\"Create a deployment\"\n description=\"Starts a build from a git ref.\"\n params={[\n {\n name: \"project\",\n type: \"string\",\n required: true,\n description: \"Project ID or slug.\",\n },\n ]}\n examples={\n <CodeTabs\n filename=\"Response\"\n language=\"201\"\n tabs={[\n { id: \"r\", label: \"Response\", code: '{ \"state\": \"queued\" }' },\n ]}\n />\n }\n/>","AppShell":"import { AppShell, Input, PageHeading } from \"@tonycodes-ui/mortar\";\n\n<AppShell\n brand=\"Northwind\"\n workspace=\"Overview\"\n navigation={[\n { label: \"Overview\", href: \"#example\", current: true },\n { label: \"Settings\", href: \"#settings\" },\n ]}\n>\n <div className=\"m-stack\">\n <PageHeading title=\"Workspace overview\" />\n <Input\n label=\"Project name\"\n defaultValue=\"Northwind\"\n hint=\"A name for your workspace\"\n />\n </div>\n</AppShell>","AppearanceControl":"import { AppearanceControl, Button, Input } from \"@tonycodes-ui/mortar\";\n\n<>\n <AppearanceControl />\n <Button>Primary action</Button>\n <Input\n label=\"Project name\"\n defaultValue=\"Northwind\"\n hint=\"A name for your workspace\"\n />\n</>","AttachmentList":"import { AttachmentList } from \"@tonycodes-ui/mortar\";\n\n<div className=\"max-w-xl\">\n <AttachmentList files={attachments} />\n</div>","AuthLayout":"import { AuthLayout, Button, Checkbox, Divider, Input, PasswordInput, ProviderButtons, Stack } from \"@tonycodes-ui/mortar\";\n\n<AuthLayout\n layout=\"cards\"\n logo=<svg viewBox=\"0 0 32 32\" className=\"text-primary\">\n <rect width=\"32\" height=\"32\" rx=\"8\" fill=\"currentColor\" />\n <path\n d=\"M10 21V11l6 6 6-6v10\"\n fill=\"none\"\n stroke=\"var(--m-on-primary)\"\n strokeWidth=\"2.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n title=\"Sign in to your account\"\n description=\"Welcome back to Northwind.\"\n footer={\n <>\n Not a member? <a href=\"#sign-up\">Start a 14-day free trial</a>\n </>\n }\n>\n <form onSubmit={(e) => e.preventDefault()}>\n <Input\n label=\"Email address\"\n type=\"email\"\n autoComplete=\"email\"\n required\n />\n <PasswordInput label=\"Password\" required />\n <Stack direction=\"row\" justify=\"between\" wrap>\n <Checkbox label=\"Remember me\" name=\"remember\" />\n <a href=\"#forgot\">Forgot password?</a>\n </Stack>\n <Button type=\"submit\">Sign in</Button>\n </form>\n <Divider label=\"or continue with\" soft spacing=\"none\" />\n <ProviderButtons\n layout=\"grid\"\n providers={[\n {\n id: \"github\",\n label: \"GitHub\",\n icon: authIcons.code,\n onSelect: () => setSelected(\"github\"),\n },\n {\n id: \"google\",\n label: \"Google\",\n icon: authIcons.globe,\n onSelect: () => setSelected(\"google\"),\n },\n ]}\n />\n</AuthLayout>","AvatarGroup":"import { AvatarGroup } from \"@tonycodes-ui/mortar\";\n\n<AvatarGroup\n label=\"Project members\"\n people={[\"Ana K\", \"Ben L\", \"Cy M\", \"Di N\", \"Ed O\", \"Flo P\"].map(\n (name) => ({ name }),\n )}\n/>","Avatar":"import { Avatar } from \"@tonycodes-ui/mortar\";\n\n<div className=\"m-actions\">\n <Avatar name=\"Ana Kovač\" size=\"xs\" />\n <Avatar name=\"Ana Kovač\" status=\"online\" />\n <Avatar name=\"Example Person\" size=\"lg\" shape=\"square\" />\n <Avatar name=\"Tom Cook\" size=\"xl\" />\n <Avatar name=\"Unknown member\" placeholder=\"icon\" />\n <Avatar\n name=\"Lindsay Walton\"\n placeholder=\"icon\"\n shape=\"square\"\n size=\"lg\"\n />\n <Avatar name=\"Tom Cook\" status=\"online\" statusPosition=\"top\" />\n</div>","Badge":"import { Badge } from \"@tonycodes-ui/mortar\";\n\n<>\n {([\"neutral\", \"info\", \"success\", \"warning\", \"danger\"] as const).map(\n (tone) => (\n <Badge key={tone} tone={tone}>\n {tone}\n </Badge>\n ),\n )}\n</>","Banner":"import { Banner, Button, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"lg\">\n {dismissed ? (\n <Button variant=\"secondary\" onClick={() => setDismissed(false)}>\n Show announcement\n </Button>\n ) : (\n <Banner\n action={{ label: \"Read the release notes\", href: \"#release\" }}\n onDismiss={() => setDismissed(true)}\n >\n Mortar 1.0 is out with 92 components.\n </Banner>\n )}\n <Banner label=\"Maintenance notice\" tone=\"default\">\n Scheduled maintenance on Sunday from 02:00 to 03:00 UTC.\n </Banner>\n <Banner\n label=\"Event notice\"\n variant=\"floating\"\n action={{ label: \"Register\", href: \"#register\" }}\n >\n Join the spring product webinar on 4 November.\n </Banner>\n {/* Layout containment keeps the fixed banner inside this example frame. */}\n <div\n className=\"m-stack\"\n style={{ contain: \"layout\", minHeight: 160 }}\n >\n <p>\n Page content stays reachable: the bottom banner can always be\n dismissed.\n </p>\n {notice ? (\n <Banner\n label=\"Cookie notice\"\n placement=\"bottom\"\n variant=\"floating\"\n tone=\"default\"\n dismissLabel=\"Dismiss cookie notice\"\n onDismiss={() => setNotice(false)}\n action={{ label: \"Cookie settings\", href: \"#cookies\" }}\n >\n We use essential cookies only.\n </Banner>\n ) : (\n <Button variant=\"secondary\" onClick={() => setNotice(true)}>\n Show cookie notice\n </Button>\n )}\n </div>\n <output aria-label=\"Banner state\">\n {dismissed ? \"dismissed\" : \"shown\"}\n </output>\n</Stack>","BentoGrid":"import { BentoGrid } from \"@tonycodes-ui/mortar\";\n\n<>\n <BentoGrid\n title=\"Layout\"\n items={[\n {\n title: \"Wide\",\n description: \"Spans two columns.\",\n span: 2,\n visual: (\n <div\n style={{\n background: \"var(--m-line)\",\n minHeight: 72,\n borderRadius: 8,\n }}\n />\n ),\n },\n {\n title: \"Focus\",\n description: \"An inverse tile.\",\n tone: \"inverse\",\n },\n ]}\n />\n <BentoGrid\n eyebrow=\"Platform\"\n title=\"Everything you need to ship\"\n description=\"Three columns, with tall tiles at both ends.\"\n tone=\"inverse\"\n items={[\n {\n title: \"Mobile friendly\",\n description: \"Every screen adapts from phone to desktop.\",\n rowSpan: 2,\n visual: <img alt=\"\" src={scenes[1]} style={art} />,\n },\n {\n title: \"Performance\",\n description: \"Pages render on the server and stream in.\",\n },\n {\n title: \"Powerful APIs\",\n description: \"Typed clients for every endpoint.\",\n rowSpan: 2,\n visual: <img alt=\"\" src={scenes[2]} style={art} />,\n },\n {\n title: \"Security\",\n description: \"Single sign-on and audit logs on every plan.\",\n },\n ]}\n />\n</>","Breadcrumbs":"import { Breadcrumbs, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"lg\">\n <Breadcrumbs\n items={[\n { label: \"Projects\", href: \"#projects\" },\n { label: \"Northwind\", href: \"#northwind\" },\n { label: \"Settings\" },\n ]}\n />\n <Breadcrumbs\n label=\"Folder path\"\n separator=\"chevron\"\n items={[\n { label: \"Documents\", href: \"#documents\" },\n { label: \"Contracts\", href: \"#contracts\" },\n { label: \"2026\" },\n ]}\n />\n</Stack>","ButtonGroup":"import { ButtonGroup, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"lg\">\n <ButtonGroup\n label=\"Record actions\"\n items={[\n { label: \"Copy\", onSelect: () => setLast(\"Copy\") },\n { label: \"Duplicate\", onSelect: () => setLast(\"Duplicate\") },\n { label: \"Archive\", disabled: true },\n ]}\n />\n <ButtonGroup\n label=\"Paging\"\n items={[\n {\n label: \"Previous\",\n iconOnly: true,\n icon: icon(\"M15 18l-6-6 6-6\"),\n onSelect: () => setLast(\"Previous\"),\n },\n {\n label: \"Next\",\n iconOnly: true,\n icon: icon(\"M9 18l6-6-6-6\"),\n onSelect: () => setLast(\"Next\"),\n },\n ]}\n />\n <ButtonGroup\n label=\"Resources\"\n items={[\n { label: \"Docs\", href: \"#docs\" },\n { label: \"Changelog\", href: \"#changelog\" },\n ]}\n />\n <output aria-label=\"Last action\">{last}</output>\n</Stack>","Button":"import { Button } from \"@tonycodes-ui/mortar\";\n\n<>\n <div className=\"m-actions\">\n <Button onClick={() => setChecked(true)}>Save changes</Button>\n <Button variant=\"secondary\">Cancel</Button>\n <Button variant=\"danger\">Delete</Button>\n <Button loading>Saving</Button>\n </div>\n <div className=\"m-actions\">\n <Button size=\"sm\" variant=\"secondary\">\n Small\n </Button>\n <Button size=\"lg\">Large</Button>\n <Button variant=\"secondary\" icon={icons.download}>\n Export CSV\n </Button>\n <Button variant=\"ghost\" icon={icons.edit} iconOnly>\n Edit project\n </Button>\n </div>\n <output aria-label=\"Action result\">\n {checked ? \"saved\" : \"idle\"}\n </output>\n</>","Calendar":"import { Button, Calendar, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"xl\">\n <div className=\"max-w-sm\">\n <Calendar\n today=\"2026-10-17\"\n selected={day}\n onSelect={setDay}\n events={meetings}\n />\n <output aria-label=\"Selected date\">{day}</output>\n <Button variant=\"ghost\" onClick={() => setDay(\"2026-12-03\")}>\n Select 3 December\n </Button>\n </div>\n <Calendar\n today=\"2026-10-17\"\n variant=\"full\"\n month=\"2026-10\"\n events={meetings}\n />\n <div>\n <Calendar\n today=\"2026-10-21\"\n selected=\"2026-10-20\"\n view={view}\n onViewChange={setView}\n events={schedule}\n onEventSelect={(id) =>\n setOpened(\n schedule.find((event) => event.id === id)?.title ?? id,\n )\n }\n />\n <output aria-label=\"Opened event\">{opened}</output>\n </div>\n <Calendar\n agenda\n today=\"2026-10-21\"\n selected={meetingDay}\n onSelect={setMeetingDay}\n events={agendaMeetings}\n onEventSelect={(id) =>\n setOpened(\n agendaMeetings.find((event) => event.id === id)?.title ?? id,\n )\n }\n />\n</Stack>","CallToAction":"import { CallToAction, MetricGroup, MockWindow } from \"@tonycodes-ui/mortar\";\n\n<>\n <CallToAction\n title=\"Start your next project\"\n description=\"Use one shared foundation.\"\n actions={[action]}\n />\n <CallToAction\n title=\"See every conversation in one place\"\n description=\"The inbox groups chats, bookings and follow-ups by customer.\"\n actions={[action, { label: \"Book a demo\", href: \"#demo\" }]}\n media={\n <MockWindow label=\"Northwind inbox\">\n <MetricGroup\n label=\"Today\"\n items={[\n { label: \"Open chats\", value: \"12\", icon: icons.inbox },\n { label: \"Bookings\", value: \"5\", icon: icons.calendar },\n ]}\n />\n </MockWindow>\n }\n />\n</>","Callout":"import { Callout } from \"@tonycodes-ui/mortar\";\n\n<>\n <Callout>Builds time out after 45 minutes.</Callout>\n <Callout tone=\"warning\">\n Changing the output directory invalidates the cache.\n </Callout>\n <Callout tone=\"danger\" title=\"Breaking\">\n This flag is removed in v4.\n </Callout>\n</>","Card":"import { Button, Card, Stack, Text } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"lg\">\n <Card\n as=\"section\"\n title=\"Billing\"\n description=\"Your plan renews on 1 November.\"\n actions={<Button variant=\"secondary\">Change plan</Button>}\n footer=\"Invoices are emailed to billing@example.com\"\n >\n <Text>\n Team plan, 12 seats. Usage resets at the start of each billing\n period.\n </Text>\n </Card>\n <Card tone=\"muted\" padding=\"compact\">\n <Text color=\"secondary\">\n A muted, compact card works as a well for secondary content.\n </Text>\n </Card>\n</Stack>","ChatPreview":"import { ChatPreview } from \"@tonycodes-ui/mortar\";\n\n<ChatPreview\n title=\"Northwind Assistant\"\n status=\"Typically replies instantly\"\n messages={[\n {\n from: \"assistant\",\n content: \"Hi! I can answer questions or book a consultation.\",\n },\n { from: \"user\", content: \"Can I book something next week?\" },\n {\n from: \"assistant\",\n content: (\n <>\n These slots are free:\n <ul>\n <li>Mon 10:00</li>\n <li>Tue 14:00</li>\n </ul>\n </>\n ),\n },\n ]}\n typing\n suggestions={[\"Mon 10:00\", \"Tue 14:00\", \"Something else\"]}\n/>","CheckList":"import { CheckList } from \"@tonycodes-ui/mortar\";\n\n<CheckList\n label=\"Included features\"\n columns={2}\n items={[\n \"Unlimited widgets\",\n \"Calendar booking\",\n \"Knowledge base training\",\n \"Email summaries\",\n ]}\n/>","Checkbox":"import { Checkbox, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"sm\">\n <Checkbox\n label=\"Email notifications\"\n checked={checked}\n onChange={(e) => setChecked(e.target.checked)}\n />\n <Checkbox\n label=\"Comments\"\n description=\"Get notified when someone comments on your post.\"\n checked={extra}\n onChange={(e) => setExtra(e.target.checked)}\n />\n <Checkbox\n label=\"I agree to the terms of service\"\n required\n checked={agreed}\n error={agreed ? undefined : \"Agree to the terms to continue\"}\n onChange={(e) => setAgreed(e.target.checked)}\n />\n</Stack>","CodeBlock":"import { CodeBlock } from \"@tonycodes-ui/mortar\";\n\n<CodeBlock\n label=\"Usage\"\n code=\"import { Button } from '@tonycodes-ui/mortar';\"\n/>","CodeInput":"import { CodeInput, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"xl\">\n <CodeInput\n label=\"Verification code\"\n hint=\"Enter the 6-digit code we sent to ana@example.com.\"\n value={code}\n onChange={setCode}\n onComplete={setCompleted}\n />\n <output aria-label=\"Completed code\">{completed}</output>\n <CodeInput\n label=\"Recovery code\"\n hint=\"One of the 8-character codes you saved when you set up two-factor authentication.\"\n alphanumeric\n length={8}\n value={recovery}\n onChange={setRecovery}\n />\n</Stack>","CodeTabs":"import { CodeTabs } from \"@tonycodes-ui/mortar\";\n\n<CodeTabs\n prompt=\"$\"\n tabs={[\n { id: \"npm\", label: \"npm\", code: \"npm i -g example\" },\n { id: \"pnpm\", label: \"pnpm\", code: \"pnpm add -g example\" },\n ]}\n/>","Combobox":"import { Combobox, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"lg\">\n <Combobox\n label=\"Assigned to\"\n options={people}\n value={value}\n onChange={setValue}\n hint=\"Only people on this project are listed.\"\n />\n <Combobox\n label=\"Region\"\n placeholder=\"Choose a region\"\n options={[\n { value: \"eu\", label: \"Europe (London)\" },\n { value: \"us\", label: \"United States (Virginia)\" },\n { value: \"ap\", label: \"Asia Pacific (Sydney)\" },\n ]}\n value={plain}\n onChange={setPlain}\n />\n <output aria-label=\"Selected value\">{value ?? \"none\"}</output>\n</Stack>","CommandPalette":"import { CommandPalette } from \"@tonycodes-ui/mortar\";\n\n<>\n {trigger(\"Open command menu\")}\n <CommandPalette\n open={open}\n onClose={() => setOpen(false)}\n query={query}\n onQueryChange={setQuery}\n groups={[\n {\n label: \"Actions\",\n items: [\n {\n id: \"new\",\n label: \"New deployment\",\n icon: icons.download,\n shortcut: [\"↵\"],\n onSelect: () => {},\n },\n {\n id: \"re\",\n label: \"Redeploy latest\",\n icon: icons.clock,\n shortcut: [\"⌘\", \"R\"],\n onSelect: () => {},\n },\n ],\n },\n ]}\n />\n</>","CommentComposer":"import { Avatar, Button, CommentComposer, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"lg\">\n <CommentComposer\n avatar={<Avatar name=\"Ana Kovač\" size=\"sm\" />}\n maxLength={280}\n hint=\"Markdown is not supported yet.\"\n preview={(text) =>\n text\n .split(/\\n{2,}/)\n .map((paragraph, i) => <p key={i}>{paragraph}</p>)\n }\n actions={\n <>\n <Button\n variant=\"ghost\"\n size=\"sm\"\n icon={icons.attach}\n iconOnly\n >\n Attach a file\n </Button>\n <Button\n variant=\"ghost\"\n size=\"sm\"\n icon={icons.smile}\n iconOnly\n >\n Add an emoji\n </Button>\n </>\n }\n onSubmit={(text) => setComments((current) => [...current, text])}\n />\n <ul aria-label=\"Posted comments\">\n {comments.map((comment, i) => (\n <li key={i}>{comment}</li>\n ))}\n </ul>\n</Stack>","ConfirmDialog":"import { ConfirmDialog } from \"@tonycodes-ui/mortar\";\n\n<>\n {trigger(\"Delete project\")}\n <ConfirmDialog\n open={open}\n onClose={() => setOpen(false)}\n onConfirm={() => setOpen(false)}\n title=\"Delete project?\"\n description=\"This removes the project, its deployments and environment variables.\"\n confirmLabel=\"Delete project\"\n confirmationText=\"Northwind\"\n />\n</>","ContactSection":"import { Button, ContactSection, Input, TextArea } from \"@tonycodes-ui/mortar\";\n\n<div>\n <ContactSection\n title=\"Talk to sales\"\n description=\"We reply within one business day.\"\n details={[{ label: \"Email\", value: \"sales@example.com\" }]}\n >\n <Input label=\"Work email\" type=\"email\" />\n <TextArea label=\"How can we help?\" />\n <Button type=\"submit\">Send message</Button>\n </ContactSection>\n <ContactSection\n title=\"Visit or write to us\"\n headingLevel={3}\n description=\"Our support team is online on weekdays.\"\n details={[{ label: \"Phone\", value: \"+44 20 7946 0000\" }]}\n media={<img alt=\"\" src={scene(600, 800, \"c9dcef\", \"51785f\")} />}\n >\n <Input label=\"Your email\" type=\"email\" />\n <TextArea label=\"Message\" />\n <Button type=\"submit\">Send</Button>\n </ContactSection>\n <ContactSection\n title=\"Our offices\"\n headingLevel={3}\n description=\"Drop by any weekday between 9 and 5.\"\n offices={[\n {\n name: \"London\",\n address: (\n <>\n 12 Example Street\n <br />\n London EC1A 1AA\n </>\n ),\n },\n {\n name: \"Lisbon\",\n address: (\n <>\n Rua Exemplo 34\n <br />\n 1200-001 Lisboa\n </>\n ),\n },\n {\n name: \"Toronto\",\n address: (\n <>\n 56 Sample Avenue\n <br />\n Toronto ON M5V 2T6\n </>\n ),\n },\n {\n name: \"Sydney\",\n address: (\n <>\n 78 Demo Road\n <br />\n Sydney NSW 2000\n </>\n ),\n },\n ]}\n />\n</div>","Container":"import { Container, Text } from \"@tonycodes-ui/mortar\";\n\n<Container size=\"md\">\n <Text color=\"secondary\">\n A medium container keeps reading width comfortable on wide screens.\n </Text>\n</Container>","ContentSection":"import { Avatar, ContentSection, MetricGroup, MockWindow } from \"@tonycodes-ui/mortar\";\n\n<>\n <ContentSection\n eyebrow=\"Our story\"\n title=\"Why Mortar exists\"\n description=\"Every product we worked on rebuilt the same buttons, forms and page shells.\"\n media={\n <MockWindow label=\"Northwind dashboard\">\n <MetricGroup\n label=\"This week\"\n items={[\n { label: \"Deploys\", value: \"48\" },\n { label: \"Incidents\", value: \"1\" },\n ]}\n />\n </MockWindow>\n }\n >\n <p>\n Each rebuild drifted: different focus rings, different dark modes,\n different accessibility bugs. Fixing one product never fixed the\n others.\n </p>\n <p>\n Mortar puts those decisions in one place. Components ship with\n typed contracts, both themes and executable accessibility checks,\n so a fix lands everywhere at once.\n </p>\n </ContentSection>\n <ContentSection\n eyebrow=\"Our mission\"\n title=\"On a mission to make shipping boring\"\n description=\"We want every release to feel like a non-event.\"\n media={<img alt=\"\" src={scenes[3]} />}\n mediaPosition=\"start\"\n stats={[\n { label: \"Founded\", value: \"2021\" },\n { label: \"Employees\", value: \"37\" },\n { label: \"Countries\", value: \"12\" },\n { label: \"Raised\", value: \"$25M\" },\n ]}\n >\n <p>\n Releases used to take a war room. Now a typed contract and a\n shared test suite catch the regressions before anyone has to.\n </p>\n </ContentSection>\n <ContentSection\n eyebrow=\"Case study\"\n title=\"How Wheelhouse halved its support queue\"\n description=\"One inbox for chats, bookings and follow-ups.\"\n tone=\"muted\"\n testimonial={{\n quote:\n \"We answered twice as many customers in the first month, without hiring.\",\n name: \"Lindsay Walton\",\n role: \"Owner, Wheelhouse Bikes\",\n avatar: <Avatar name=\"Lindsay Walton\" decorative />,\n }}\n >\n <p>\n Wheelhouse moved three channels into one shared queue and set up\n saved replies for the questions they hear every day.\n </p>\n </ContentSection>\n</>","DataTable":"import { Badge, Button, DataTable, Pagination, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"xl\">\n <DataTable\n caption=\"Projects\"\n rowLabel={(row) => row.name}\n rowHref={(row) => `#project-${row.id}`}\n defaultSort={{ key: \"name\", direction: \"ascending\" }}\n selectedIds={selectedRows}\n onSelectionChange={setSelectedRows}\n striped\n columns={[\n {\n key: \"name\",\n label: \"Name\",\n render: (row) => row.name,\n sortable: true,\n },\n {\n key: \"status\",\n label: \"Status\",\n render: (row) => <Badge>{row.status}</Badge>,\n },\n {\n key: \"owner\",\n label: \"Owner\",\n render: (row) => row.owner,\n truncate: true,\n width: \"30%\",\n },\n {\n key: \"requests\",\n label: \"Requests\",\n align: \"end\",\n render: (row) => row.requests.toLocaleString(\"en-GB\"),\n sortable: true,\n },\n {\n key: \"actions\",\n label: \"Actions\",\n render: (row) => (\n <Button onClick={() => setPage(2)}>\n Edit {row.name}\n </Button>\n ),\n },\n ]}\n rows={[\n {\n id: \"northwind\",\n name: \"Northwind\",\n status: \"Active\",\n owner: \"Platform team with a deliberately long owner name\",\n requests: 12840,\n },\n {\n id: \"acme\",\n name: \"Acme\",\n status: \"Paused\",\n owner: \"Growth\",\n requests: 920,\n },\n {\n id: \"zephyr\",\n name: \"Zephyr\",\n status: \"Active\",\n owner: \"Data\",\n requests: 4310,\n },\n ]}\n footer={\n <Pagination page={page} pageCount={3} onChange={setPage} />\n }\n />\n <DataTable\n caption=\"People by office\"\n rowLabel={(row) => row.name}\n groupBy={(row) => row.office}\n defaultSort={{ key: \"name\", direction: \"ascending\" }}\n selectedIds={selectedPeople}\n onSelectionChange={setSelectedPeople}\n columns={[\n {\n key: \"name\",\n label: \"Name\",\n render: (row) => row.name,\n sortable: true,\n },\n { key: \"title\", label: \"Title\", render: (row) => row.title },\n { key: \"email\", label: \"Email\", render: (row) => row.email },\n { key: \"role\", label: \"Role\", render: (row) => row.role },\n ]}\n rows={[\n {\n id: \"lindsay\",\n name: \"Lindsay Walton\",\n title: \"Front-end developer\",\n email: \"lindsay@example.com\",\n role: \"Member\",\n office: \"Edinburgh\",\n },\n {\n id: \"tom\",\n name: \"Tom Cook\",\n title: \"Director of product\",\n email: \"tom@example.com\",\n role: \"Admin\",\n office: \"London\",\n },\n {\n id: \"courtney\",\n name: \"Courtney Henry\",\n title: \"Designer\",\n email: \"courtney@example.com\",\n role: \"Admin\",\n office: \"Edinburgh\",\n },\n {\n id: \"whitney\",\n name: \"Whitney Francis\",\n title: \"Copywriter\",\n email: \"whitney@example.com\",\n role: \"Member\",\n office: \"London\",\n },\n {\n id: \"leonard\",\n name: \"Leonard Krasner\",\n title: \"Senior designer\",\n email: \"leonard@example.com\",\n role: \"Owner\",\n office: \"London\",\n },\n ]}\n />\n</Stack>","DescriptionList":"import { ActionLink, AttachmentList, Badge, Card, DescriptionList, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"xl\">\n <DescriptionList\n title=\"Applicant information\"\n description=\"Personal details and application.\"\n items={[\n { term: \"Full name\", details: \"Margot Foster\" },\n {\n term: \"Attachments\",\n details: <AttachmentList files={attachments} />,\n },\n {\n term: \"Application for\",\n details: \"Backend developer\",\n action: (\n <ActionLink label=\"Update\" href=\"#role\" variant=\"ghost\" />\n ),\n },\n { term: \"Email address\", details: \"margot@example.com\" },\n { term: \"Salary expectation\", details: \"$120,000\" },\n {\n term: \"About\",\n details:\n \"Fugiat ipsum ipsum deserunt culpa aute sint do nostrud anim incididunt cillum culpa consequat.\",\n },\n ]}\n />\n <Card title=\"Deployment\" headingLevel={2}>\n <DescriptionList\n layout=\"stacked\"\n items={[\n { term: \"Region\", details: \"eu-west-2\" },\n {\n term: \"Status\",\n details: <Badge tone=\"success\">Live</Badge>,\n },\n ]}\n />\n </Card>\n <DescriptionList\n title=\"Billing details\"\n description=\"Plan, payment and invoices.\"\n variant=\"striped\"\n items={[\n { term: \"Plan\", details: \"Team, billed yearly\" },\n { term: \"Seats\", details: \"12 of 15 in use\" },\n { term: \"Payment method\", details: \"Visa ending 4242\" },\n { term: \"Next invoice\", details: \"1 November 2026\" },\n ]}\n />\n <Card\n title=\"Candidate\"\n description=\"Shown in a card: the card carries the title.\"\n headingLevel={2}\n >\n <DescriptionList\n items={[\n { term: \"Full name\", details: \"Margot Foster\" },\n { term: \"Role\", details: \"Backend developer\" },\n { term: \"Email address\", details: \"margot@example.com\" },\n {\n term: \"Stage\",\n details: <Badge tone=\"info\">Interviewing</Badge>,\n action: (\n <ActionLink label=\"Move\" href=\"#stage\" variant=\"ghost\" />\n ),\n },\n ]}\n />\n </Card>\n</Stack>","Divider":"import { Button, Divider, Stack, Text } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"none\">\n <Text>Account details</Text>\n <Divider />\n <Text>Notification preferences</Text>\n <Divider soft spacing=\"sm\" />\n <Text color=\"secondary\">\n A soft divider separates related rows.\n </Text>\n <Divider label=\"Or continue with\" />\n <Button variant=\"secondary\">Single sign-on</Button>\n</Stack>","DocsShell":"import { DocsShell, SearchTrigger } from \"@tonycodes-ui/mortar\";\n\n<DocsShell\n brand=\"Example Docs\"\n version=\"v3.2\"\n sections={[\n { label: \"Guides\", href: \"#guides\", current: true },\n { label: \"API\", href: \"#api\" },\n ]}\n navigation={[\n {\n label: \"Getting started\",\n items: [\n { label: \"Quickstart\", href: \"#quickstart\", current: true },\n { label: \"Project structure\", href: \"#structure\" },\n ],\n },\n ]}\n toc={[{ id: \"install\", label: \"Install the CLI\", current: true }]}\n search={<SearchTrigger onOpen={() => setOpen(true)} />}\n>\n <h1>Quickstart</h1>\n</DocsShell>","Dropdown":"import { Dropdown } from \"@tonycodes-ui/mortar\";\n\n<div className=\"m-actions\">\n <Dropdown\n label=\"Actions\"\n items={[\n { label: \"Duplicate\", onSelect: () => setChecked(true) },\n {\n label: \"Delete\",\n danger: true,\n onSelect: () => setChecked(false),\n },\n ]}\n />\n <Dropdown\n label=\"More options\"\n icon={icons.more}\n iconOnly\n variant=\"ghost\"\n header=\"Signed in as ana@example.com\"\n items={[\n {\n section: \"Project\",\n label: \"Edit\",\n icon: icons.edit,\n description: \"Rename or change details\",\n onSelect: () => setMenuChoice(\"edit\"),\n },\n {\n section: \"Project\",\n label: \"Export\",\n icon: icons.download,\n onSelect: () => setMenuChoice(\"export\"),\n },\n {\n section: \"Help\",\n label: \"Documentation\",\n href: \"#docs\",\n },\n ]}\n />\n <output aria-label=\"Menu choice\">{menuChoice}</output>\n</div>","EmptyState":"import { Avatar, Button, EmptyState, Stack, StackedList } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"xl\">\n <EmptyState\n title=\"No projects yet\"\n description=\"Create your first project to get started.\"\n icon={icons.inbox}\n action={<Button>Create project</Button>}\n />\n <EmptyState\n dashed\n title=\"No databases\"\n description=\"Connect a database to start syncing records.\"\n icon={icons.download}\n action={<Button variant=\"secondary\">Add database</Button>}\n />\n <EmptyState\n align=\"start\"\n title=\"Projects\"\n description=\"You haven’t created a project yet. Get started by selecting a template or start from an empty project.\"\n >\n <Stack gap=\"md\" align=\"start\">\n <StackedList\n label=\"Project templates\"\n items={[\n {\n id: \"list\",\n title: \"Create a list\",\n description:\n \"Another to-do system you’ll try but eventually give up on.\",\n href: \"#example\",\n leading: (\n <span className=\"m-empty-icon\" aria-hidden=\"true\">\n {icons.edit}\n </span>\n ),\n },\n {\n id: \"calendar\",\n title: \"Create a calendar\",\n description: \"Stay on top of your deadlines, or don’t.\",\n href: \"#example\",\n leading: (\n <span className=\"m-empty-icon\" aria-hidden=\"true\">\n {icons.calendar}\n </span>\n ),\n },\n {\n id: \"timeline\",\n title: \"Create a timeline\",\n description:\n \"Get a birds-eye view of your procrastination.\",\n href: \"#example\",\n leading: (\n <span className=\"m-empty-icon\" aria-hidden=\"true\">\n {icons.clock}\n </span>\n ),\n },\n ]}\n />\n <a href=\"#example\">Or start from an empty project →</a>\n </Stack>\n </EmptyState>\n <EmptyState\n title=\"Add team members\"\n description=\"You haven’t added any team members to your project yet.\"\n icon={icons.mail}\n >\n <StackedList\n label=\"Team members previously added to projects\"\n items={[\"Lindsay Walton\", \"Courtney Henry\", \"Tom Cook\"].map(\n (person) => ({\n id: person,\n title: person,\n description: \"Designer\",\n leading: <Avatar name={person} size=\"sm\" decorative />,\n trailing: (\n <Button\n variant=\"secondary\"\n size=\"sm\"\n aria-label={`Invite ${person}`}\n >\n Invite\n </Button>\n ),\n }),\n )}\n />\n </EmptyState>\n</Stack>","ErrorSummary":"import { ErrorSummary } from \"@tonycodes-ui/mortar\";\n\n<ErrorSummaryExample />","FAQ":"import { FAQ } from \"@tonycodes-ui/mortar\";\n\n<>\n <FAQ\n title=\"Questions\"\n items={[\n {\n question: \"Is the kit open source?\",\n answer: \"Yes. Mortar is MIT licensed.\",\n },\n ]}\n />\n <FAQ\n title=\"Everything else\"\n description=\"Answers stay visible so they can be scanned.\"\n layout=\"grid\"\n items={[\n {\n question: \"Does it support dark mode?\",\n answer: \"Yes. Every component reads the semantic tokens.\",\n },\n {\n question: \"Can I change the brand colour?\",\n answer: \"Set the accent token once in your theme.\",\n },\n {\n question: \"Which frameworks are supported?\",\n answer: \"React 19 with Tailwind CSS 4.\",\n },\n ]}\n />\n</>","FeatureGrid":"import { FeatureGrid } from \"@tonycodes-ui/mortar\";\n\n<>\n <FeatureGrid\n title=\"Made to work together\"\n items={items.map((item, i) => ({\n ...item,\n icon: [icons.calendar, icons.inbox][i],\n }))}\n />\n <FeatureGrid\n title=\"Numbered for sequences\"\n marker=\"number\"\n tone=\"muted\"\n items={items}\n />\n</>","FeatureSection":"import { CheckList, CodeBlock, FeatureSection, Input, MockWindow } from \"@tonycodes-ui/mortar\";\n\n<>\n <FeatureSection\n eyebrow=\"Theming\"\n title=\"Your brand, centrally managed\"\n description=\"Choose a theme in one place.\"\n details={\n <CheckList items={[\"Light and dark\", \"Brand colours\"]} />\n }\n >\n <Input\n label=\"Project name\"\n defaultValue=\"Northwind\"\n hint=\"A name for your workspace\"\n />\n </FeatureSection>\n <FeatureSection\n eyebrow=\"Dashboard\"\n title=\"See the whole account at a glance\"\n description=\"The screenshot runs past the edge so the product feels bigger than the page.\"\n offset\n framed={false}\n >\n <MockWindow label=\"Northwind dashboard\" address=\"northwind.app\">\n <img\n alt=\"Dashboard with revenue cards and recent orders\"\n src={screenshot}\n />\n </MockWindow>\n </FeatureSection>\n <FeatureSection\n eyebrow=\"API\"\n title=\"Ship your first request in minutes\"\n description=\"One typed client for every endpoint.\"\n tone=\"inverse\"\n framed={false}\n reverse\n >\n <CodeBlock\n label=\"send-invite.ts\"\n code={`import { Northwind } from \"@northwind/sdk\";\\n\\nconst client = new Northwind(key);\\n\\nawait client.invites.create({\\n email: \"ana@example.com\",\\n role: \"editor\",\\n});`}\n />\n </FeatureSection>\n</>","Fieldset":"import { Fieldset, Input, Select } from \"@tonycodes-ui/mortar\";\n\n<div className=\"max-w-md\">\n <Fieldset\n legend=\"Shipping address\"\n description=\"We only ship to the countries listed.\"\n >\n <Input label=\"Street address\" />\n <Input label=\"City\" />\n <Select\n label=\"Country\"\n options={[\n { value: \"gb\", label: \"United Kingdom\" },\n { value: \"ie\", label: \"Ireland\" },\n ]}\n />\n </Fieldset>\n</div>","FileTree":"import { FileTree } from \"@tonycodes-ui/mortar\";\n\n<FileTree\n label=\"Project files\"\n items={[\n {\n name: \"app\",\n children: [\n { name: \"page.tsx\", highlighted: true, note: \"entry\" },\n ],\n },\n { name: \"package.json\" },\n ]}\n/>","FilterChip":"import { FilterChip } from \"@tonycodes-ui/mortar\";\n\n<div className=\"m-actions\">\n <FilterChip\n label=\"Status\"\n selected={selected}\n onClick={() => setSelected(!selected)}\n />\n {filters.map((filter) => (\n <FilterChip\n key={filter}\n label={filter}\n onRemove={() =>\n setFilters((current) => current.filter((f) => f !== filter))\n }\n />\n ))}\n</div>","Footer":"import { Footer, Newsletter } from \"@tonycodes-ui/mortar\";\n\n<>\n <Footer\n brand=\"Northwind\"\n description=\"Example product\"\n note=\"Weekdays 9 to 5\"\n columns={[{ label: \"Product\", items: [action] }]}\n copyright=\"© Example company\"\n social={[\n {\n label: \"Northwind website\",\n href: \"#website\",\n icon: icons.globe,\n },\n {\n label: \"Northwind on GitHub\",\n href: \"#github\",\n icon: icons.code,\n },\n { label: \"Email Northwind\", href: \"#email\", icon: icons.mail },\n ]}\n />\n <Footer\n brand=\"Northwind\"\n description=\"Support software for small teams.\"\n columns={[\n {\n label: \"Company\",\n items: [\n { label: \"About\", href: \"#about\" },\n { label: \"Customers\", href: \"#customers\" },\n { label: \"Careers\", href: \"#careers\" },\n ],\n },\n ]}\n copyright=\"© Example company\"\n legal={[{ label: \"Privacy\", href: \"#privacy\" }]}\n newsletter={\n <Newsletter\n title=\"Subscribe to product news\"\n description=\"One email a month. Unsubscribe any time.\"\n onSubmit={() => setExtra(true)}\n status={extra ? \"success\" : \"idle\"}\n />\n }\n />\n <Footer\n layout=\"center\"\n brand=\"Atlas\"\n description=\"Scheduling for clinics and agencies.\"\n columns={[\n {\n label: \"Footer\",\n items: [\n { label: \"About\", href: \"#about-atlas\" },\n { label: \"Blog\", href: \"#blog\" },\n { label: \"Jobs\", href: \"#jobs\" },\n { label: \"Press\", href: \"#press\" },\n { label: \"Accessibility\", href: \"#accessibility\" },\n ],\n },\n ]}\n copyright=\"© Example company\"\n social={[\n { label: \"Atlas website\", href: \"#atlas-web\", icon: icons.globe },\n { label: \"Atlas on GitHub\", href: \"#atlas-gh\", icon: icons.code },\n ]}\n />\n <Footer\n layout=\"inline\"\n brand=\"Atlas\"\n note=\"Made for clinics and agencies.\"\n columns={[\n {\n label: \"Product links\",\n items: [\n { label: \"Status\", href: \"#status\" },\n { label: \"Changelog\", href: \"#changelog\" },\n ],\n },\n ]}\n copyright=\"© Example company\"\n legal={[{ label: \"Privacy\", href: \"#atlas-privacy\" }]}\n />\n</>","GridList":"import { ActionLink, Avatar, Badge, GridList, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"xl\">\n <GridList\n label=\"Team members\"\n items={[\n {\n id: \"ana\",\n title: \"Ana Kovač\",\n description: \"Engineering lead\",\n href: \"#ana\",\n media: <Avatar name=\"Ana Kovač\" decorative />,\n meta: (\n <>\n <Badge tone=\"success\">Admin</Badge>\n <a href=\"#team-platform\">Platform team</a>\n </>\n ),\n actions: (\n <ActionLink\n label=\"Email Ana\"\n href=\"#email-ana\"\n variant=\"secondary\"\n />\n ),\n },\n {\n id: \"tom\",\n title: \"Tom Cook\",\n description: \"Product designer\",\n href: \"#tom\",\n media: <Avatar name=\"Tom Cook\" decorative />,\n },\n {\n id: \"lindsay\",\n title: \"Lindsay Walton\",\n description: \"Support\",\n href: \"#lindsay\",\n media: <Avatar name=\"Lindsay Walton\" decorative />,\n },\n ]}\n />\n <GridList\n label=\"Projects\"\n columns={2}\n items={[\n {\n id: \"billing\",\n title: \"Billing redesign\",\n description: \"12 open tasks · due 30 October\",\n meta: <Badge tone=\"warning\">At risk</Badge>,\n },\n {\n id: \"search\",\n title: \"Search relevance\",\n description: \"4 open tasks · due 14 November\",\n meta: <Badge>On track</Badge>,\n },\n ]}\n />\n <GridList\n label=\"Contacts\"\n actionsLayout=\"split\"\n items={[\n { id: \"jane\", name: \"Jane Cooper\", role: \"Regional paradigm\" },\n { id: \"cody\", name: \"Cody Fisher\", role: \"Product directives\" },\n { id: \"esther\", name: \"Esther Howard\", role: \"Forward response\" },\n ].map((person) => ({\n id: person.id,\n title: person.name,\n description: person.role,\n media: <Avatar name={person.name} decorative />,\n actions: (\n <>\n <a href={`#email-${person.id}`}>\n {icons.mail}Email\n <span className=\"m-sr-only\"> {person.name}</span>\n </a>\n <a href={`#meet-${person.id}`}>\n {icons.calendar}Schedule\n <span className=\"m-sr-only\"> with {person.name}</span>\n </a>\n </>\n ),\n }))}\n />\n <GridList\n label=\"Clients\"\n columns={2}\n items={[\n {\n id: \"tuple\",\n title: \"Tuple\",\n href: \"#client-tuple\",\n media: <Avatar name=\"Tuple\" shape=\"square\" decorative />,\n details: [\n { term: \"Last invoice\", details: \"14 October 2026\" },\n {\n term: \"Amount\",\n details: (\n <>\n £2,000.00 <Badge tone=\"danger\">Overdue</Badge>\n </>\n ),\n },\n ],\n },\n {\n id: \"savvycal\",\n title: \"SavvyCal\",\n href: \"#client-savvycal\",\n media: <Avatar name=\"SavvyCal\" shape=\"square\" decorative />,\n details: [\n { term: \"Last invoice\", details: \"2 October 2026\" },\n {\n term: \"Amount\",\n details: (\n <>\n £14,000.00 <Badge tone=\"success\">Paid</Badge>\n </>\n ),\n },\n ],\n },\n ]}\n />\n</Stack>","HeaderSection":"import { HeaderSection } from \"@tonycodes-ui/mortar\";\n\n<>\n <HeaderSection\n eyebrow=\"About us\"\n title=\"We build the foundations other teams ship on\"\n description=\"Mortar started as one team's design system. Now it powers product, marketing and documentation sites.\"\n links={[\n { label: \"Open roles\", href: \"#roles\" },\n { label: \"Our values\", href: \"#values\" },\n ]}\n stats={[\n { label: \"Components\", value: \"100\" },\n { label: \"Teams using Mortar\", value: \"40+\" },\n { label: \"Accessibility checks per release\", value: \"300\" },\n ]}\n />\n <HeaderSection\n title=\"Simple, transparent pricing\"\n description=\"One plan per team size. No per-seat surprises.\"\n tone=\"inverse\"\n align=\"center\"\n headingLevel={2}\n />\n</>","Hero":"import { Hero, MockWindow, StackedList } from \"@tonycodes-ui/mortar\";\n\n<>\n <Hero\n title=\"Build with confidence.\"\n description=\"One shared foundation for your next product.\"\n actions={[action]}\n />\n <Hero\n headingLevel={2}\n eyebrow=\"New in spring\"\n title=\"Plan trips the whole team can see.\"\n description=\"Itineraries, bookings and budgets stay in one shared place.\"\n actions={[action, { label: \"Take the tour\", href: \"#tour\" }]}\n background={\n <img\n alt=\"\"\n src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f6d365'/%3E%3Cstop offset='1' stop-color='%23fda085'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='600' fill='url(%23s)'/%3E%3Ccircle cx='880' cy='190' r='90' fill='%23fff3c4'/%3E%3Cpath d='M0 420 L220 250 L420 400 L640 220 L900 430 L1200 280 L1200 600 L0 600Z' fill='%234b6cb7'/%3E%3Cpath d='M0 500 L300 380 L560 500 L820 360 L1200 520 L1200 600 L0 600Z' fill='%23243b55'/%3E%3C/svg%3E\"\n />\n }\n />\n <Hero\n headingLevel={2}\n layout=\"split\"\n wide=\"copy\"\n title=\"Your inbox, in your pocket.\"\n emphasis=\"in your pocket\"\n description=\"Reply to customers from anywhere with the mobile app.\"\n actions={[action]}\n note={<p>Free for teams of up to five.</p>}\n >\n <MockWindow variant=\"phone\" label=\"Northwind mobile inbox\">\n <StackedList\n label=\"Conversations\"\n items={[\n {\n id: \"ana\",\n title: \"Ana Kovač\",\n description: \"Can I move my booking?\",\n },\n {\n id: \"tom\",\n title: \"Tom Cook\",\n description: \"Thanks, that worked.\",\n },\n {\n id: \"lia\",\n title: \"Lia Chen\",\n description: \"Is parking included?\",\n },\n ]}\n />\n </MockWindow>\n </Hero>\n <Hero\n headingLevel={2}\n layout=\"split\"\n title=\"Every trip, in one shared place.\"\n description=\"Photos, plans and bookings stay together for the whole group.\"\n actions={[action]}\n images={scenes.map((src) => (\n <img key={src} alt=\"\" src={src} />\n ))}\n />\n <Hero\n headingLevel={2}\n layout=\"angled\"\n eyebrow=\"Field notes\"\n title=\"Plan the route before you leave.\"\n description=\"Offline maps and shared checklists for every expedition.\"\n actions={[action]}\n >\n <img alt=\"\" src={scenes[1]} />\n </Hero>\n</>","Input":"import { Button, Input } from \"@tonycodes-ui/mortar\";\n\n<>\n <Input\n label=\"Project name\"\n defaultValue=\"Northwind\"\n hint=\"A name for your workspace\"\n />\n <Input label=\"Email\" error=\"Enter a valid email address\" />\n <Input\n label=\"Search candidates\"\n type=\"search\"\n leadingIcon={icons.search}\n action={\n <Button\n variant=\"secondary\"\n onClick={() => setChecked(!checked)}\n aria-pressed={checked}\n >\n Sort\n </Button>\n }\n />\n <Input label=\"Website\" prefix=\"https://\" suffix=\".com\" />\n</>","Kbd":"import { Kbd } from \"@tonycodes-ui/mortar\";\n\n<p>\n Press <Kbd keys={[\"⌘\", \"K\"]} /> to search.\n</p>","LinkCards":"import { LinkCards } from \"@tonycodes-ui/mortar\";\n\n<LinkCards\n items={[\n {\n href: \"#env\",\n label: \"Environment variables\",\n description: \"Add secrets per environment.\",\n },\n ]}\n/>","Listbox":"import { Listbox, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"lg\">\n <Listbox\n label=\"Assigned to\"\n options={people}\n value={value}\n onChange={setValue}\n hint=\"Only people on this project are listed.\"\n />\n <Listbox\n label=\"Region\"\n placeholder=\"Choose a region\"\n options={[\n { value: \"eu\", label: \"Europe (London)\" },\n { value: \"us\", label: \"United States (Virginia)\" },\n { value: \"ap\", label: \"Asia Pacific (Sydney)\" },\n ]}\n value={plain}\n onChange={setPlain}\n />\n <output aria-label=\"Selected value\">{value ?? \"none\"}</output>\n</Stack>","LogoCloud":"import { LogoCloud } from \"@tonycodes-ui/mortar\";\n\n<>\n <LogoCloud\n label=\"Example companies\"\n items={[\n { name: \"Northwind\" },\n { name: \"Contoso\" },\n { name: \"Fabrikam\" },\n ]}\n />\n <LogoCloud\n label=\"Teams on the grid\"\n layout=\"grid\"\n items={[\n { name: \"Tailspin\" },\n { name: \"Litware\" },\n { name: \"Proseware\" },\n { name: \"Adatum\" },\n ]}\n />\n <LogoCloud\n label=\"Customer logos\"\n layout=\"split\"\n title=\"Trusted by teams that ship every day\"\n description=\"From two-person studios to global support desks.\"\n actions={[{ label: \"Read case studies\", href: \"#cases\" }]}\n items={[\n { name: \"Woodgrove\" },\n { name: \"Wingtip\" },\n { name: \"Relecloud\" },\n { name: \"Lucerne\" },\n ]}\n />\n</>","MarketingHeader":"import { MarketingHeader } from \"@tonycodes-ui/mortar\";\n\n<>\n <MarketingHeader\n brand=\"Northwind\"\n id=\"site-header\"\n logo={\n <img\n alt=\"\"\n src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' rx='3' fill='currentColor'/%3E%3C/svg%3E\"\n />\n }\n links={[\n {\n label: \"Product\",\n items: [\n {\n label: \"Analytics\",\n href: \"#analytics\",\n description: \"See where your visitors come from.\",\n icon: icons.clock,\n },\n {\n label: \"Inbox\",\n href: \"#inbox\",\n description: \"Every conversation in one place.\",\n icon: icons.inbox,\n },\n {\n label: \"Scheduling\",\n href: \"#scheduling\",\n description: \"Let customers book time with you.\",\n icon: icons.calendar,\n },\n ],\n footer: [\n { label: \"Watch demo\", href: \"#demo\" },\n { label: \"Contact sales\", href: \"#sales\" },\n ],\n },\n { label: \"Features\", href: \"#features\" },\n { label: \"Pricing\", href: \"#pricing\" },\n ]}\n action={action}\n />\n <MarketingHeader\n brand=\"Atlas\"\n tagline=\"Clinic scheduling\"\n homeHref=\"#atlas\"\n layout=\"center\"\n mobileMenu=\"panel\"\n links={[\n {\n label: \"Solutions\",\n layout: \"full\",\n items: [\n {\n label: \"Retail\",\n href: \"#retail\",\n description: \"Stock and orders across every shop.\",\n icon: icons.inbox,\n },\n {\n label: \"Clinics\",\n href: \"#clinics\",\n description: \"Appointments patients can book.\",\n icon: icons.calendar,\n },\n {\n label: \"Agencies\",\n href: \"#agencies\",\n description: \"Time tracked against every client.\",\n icon: icons.clock,\n },\n {\n label: \"Nonprofits\",\n href: \"#nonprofits\",\n description: \"Donor records in one place.\",\n icon: icons.globe,\n },\n ],\n footer: [\n { label: \"Customer stories\", href: \"#stories\" },\n { label: \"Book a demo\", href: \"#book\" },\n ],\n },\n {\n label: \"Resources\",\n layout: \"columns\",\n items: [\n {\n label: \"Guides\",\n href: \"#guides\",\n description: \"Step-by-step setup help.\",\n icon: icons.edit,\n },\n {\n label: \"API\",\n href: \"#api\",\n description: \"Build on Atlas.\",\n icon: icons.code,\n },\n {\n label: \"Webinars\",\n href: \"#webinars\",\n description: \"Live sessions every month.\",\n icon: icons.clock,\n },\n {\n label: \"Support\",\n href: \"#support\",\n description: \"Talk to a person.\",\n icon: icons.mail,\n },\n ],\n footer: [\n { label: \"Status\", href: \"#status\" },\n { label: \"Changelog\", href: \"#changelog\" },\n ],\n },\n ]}\n action={{ label: \"Sign in\", href: \"#sign-in\" }}\n />\n</>","MarketingPage":"import { Footer, Hero, MarketingHeader, MarketingPage, Notice } from \"@tonycodes-ui/mortar\";\n\n<MarketingPage\n align=\"center\"\n header={\n <MarketingHeader\n brand=\"Northwind\"\n tagline=\"Scheduling for small teams\"\n homeHref=\"#home\"\n links={[\n { label: \"Pricing\", href: \"#pricing\" },\n { label: \"Docs\", href: \"#docs\" },\n ]}\n action={{ label: \"Sign in\", href: \"#sign-in\" }}\n />\n }\n footer={\n <Footer\n layout=\"inline\"\n brand=\"Northwind\"\n note=\"Built for teams of every size.\"\n copyright=\"© Example company\"\n legal={[\n { label: \"Privacy\", href: \"#privacy\" },\n { label: \"Terms\", href: \"#terms\" },\n ]}\n />\n }\n>\n <Hero\n layout=\"split\"\n wide=\"copy\"\n title=\"Bring every team onto one schedule.\"\n emphasis=\"every team\"\n description=\"Shifts, rooms and bookings in one place, in sync for everyone.\"\n actions={[\n { label: \"Start free\", href: \"#start\" },\n { label: \"Sign in\", href: \"#sign-in\" },\n ]}\n note={\n <Notice title=\"Scheduled maintenance\">\n Sign-in is unavailable on Sunday from 02:00 to 03:00 UTC.\n </Notice>\n }\n >\n <img alt=\"\" src={scenes[0]} />\n </Hero>\n</MarketingPage>","MediaObject":"import { Avatar, MediaObject, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"lg\">\n <MediaObject\n media={<Avatar name=\"Ana Kovač\" />}\n title=\"Ana Kovač\"\n >\n Shipped the new billing flow. Can someone review the copy on the\n confirmation step before Friday?\n </MediaObject>\n <MediaObject\n media={<Avatar name=\"Lindsay Walton\" shape=\"square\" />}\n title=\"Lindsay Walton\"\n align=\"center\"\n reverse\n >\n Reversed and centred for replies on the right.\n </MediaObject>\n</Stack>","MetricGroup":"import { MetricGroup } from \"@tonycodes-ui/mortar\";\n\n<MetricGroup\n label=\"Summary\"\n items={[\n {\n label: \"Requests\",\n value: \"1.42M\",\n change: \"+12.4%\",\n tone: \"success\",\n icon: icons.inbox,\n },\n {\n label: \"Latency\",\n value: \"184ms\",\n change: \"−18ms\",\n tone: \"success\",\n },\n ]}\n/>","MockWindow":"import { MockWindow, Stack, Text } from \"@tonycodes-ui/mortar\";\n\n<MockWindow label=\"Calendar settings\" address=\"app.example.com\">\n <Stack gap=\"sm\">\n <Text weight=\"semibold\">Working hours</Text>\n <Text color=\"muted\">Monday – Friday · 09:00 – 17:00</Text>\n </Stack>\n</MockWindow>","Modal":"import { Button, Input, Modal } from \"@tonycodes-ui/mortar\";\n\n<>\n <Button onClick={() => setOpen(true)}>Open dialog</Button>\n <Modal\n open={open}\n onClose={() => setOpen(false)}\n title=\"Create project\"\n >\n <Input\n label=\"Project name\"\n defaultValue=\"Northwind\"\n hint=\"A name for your workspace\"\n />\n <Button onClick={() => setOpen(false)}>Create project</Button>\n </Modal>\n</>","Navbar":"import { Avatar, Button, Navbar } from \"@tonycodes-ui/mortar\";\n\n<Navbar\n brand=\"Northwind\"\n homeHref=\"#home\"\n items={[\n { label: \"Dashboard\", href: \"#dashboard\", current: true },\n { label: \"Team\", href: \"#team\" },\n { label: \"Projects\", href: \"#projects\" },\n { label: \"Calendar\", href: \"#calendar\" },\n ]}\n actions={\n <>\n <Button variant=\"secondary\">Invite</Button>\n <Avatar name=\"Ana Kovač\" size=\"sm\" />\n </>\n }\n/>","NetworkIllustration":"import { NetworkIllustration, Text } from \"@tonycodes-ui/mortar\";\n\n<>\n <NetworkIllustration\n label=\"Five connected points\"\n description=\"Web and Mobile connect to a hub, which connects to Store and Mail. The motion is illustrative.\"\n width={480}\n height={260}\n nodes={nodes}\n connections={connections}\n />\n <Text color=\"secondary\" size=\"sm\">\n These two decorative drawings share one pause state.\n </Text>\n <div\n data-network-pair=\"\"\n style={{ display: \"grid\", gridTemplateColumns: \"1fr 1fr\", gap: 16 }}\n >\n <NetworkIllustration\n width={240}\n height={200}\n nodes={ring}\n connections={loop}\n duration={2}\n paused={paused}\n onPausedChange={setPaused}\n />\n <NetworkIllustration\n width={240}\n height={200}\n nodes={ring}\n connections={loop}\n duration={3}\n paused={paused}\n onPausedChange={setPaused}\n />\n </div>\n <div style={{ maxWidth: 240 }}>\n <NetworkIllustration\n motion=\"static\"\n width={240}\n height={200}\n nodes={ring}\n connections={loop}\n />\n </div>\n</>","Newsletter":"import { Newsletter } from \"@tonycodes-ui/mortar\";\n\n<div>\n <Newsletter\n title=\"Product updates, monthly\"\n description=\"No spam.\"\n onSubmit={() => setSelected(true)}\n status={selected ? \"success\" : \"idle\"}\n message=\"Thanks. Check your inbox to confirm.\"\n />\n <Newsletter\n title=\"Get the support playbook\"\n headingLevel={3}\n description=\"Five short lessons, one a day. Unsubscribe any time.\"\n layout=\"center\"\n variant=\"panel\"\n submitLabel=\"Send me the lessons\"\n onSubmit={() => undefined}\n />\n</div>","NotFound":"import { NotFound } from \"@tonycodes-ui/mortar\";\n\n<>\n <NotFound\n title=\"This page isn't deployed.\"\n description=\"Check the URL or head back home.\"\n actions={[{ label: \"Go home\", href: \"/\" }, action]}\n illustration={\n <svg\n viewBox=\"0 0 120 80\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"3\"\n strokeLinecap=\"round\"\n >\n <path d=\"M20 60h80M30 60V30l30-18 30 18v30M50 60V42h20v18\" />\n <path d=\"M88 14l14 14M102 14L88 28\" />\n </svg>\n }\n />\n <NotFound\n headingLevel={2}\n title=\"This trail doesn't go anywhere.\"\n description=\"The page you're looking for has moved or never existed.\"\n actions={[{ label: \"Back to home\", href: \"/\" }]}\n background={<img alt=\"\" src={scenes[1]} />}\n />\n</>","Notice":"import { Button, Notice, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"md\">\n <Notice title=\"Update available\" tone=\"info\">\n Your project can use the latest release.\n </Notice>\n {noticeShown ? (\n <Notice\n title=\"Payment failed\"\n tone=\"danger\"\n actions={<a href=\"#billing\">Update billing</a>}\n onDismiss={() => setNoticeShown(false)}\n >\n We couldn't charge your card ending 4242.\n </Notice>\n ) : (\n <Button variant=\"secondary\" onClick={() => setNoticeShown(true)}>\n Show payment notice\n </Button>\n )}\n</Stack>","OrderHistory":"import { ActionLink, Button, OrderHistory, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"xl\">\n <OrderHistory orders={orders} />\n <OrderHistory\n headingLevel={3}\n orders={[\n {\n ...orders[0],\n id: \"o3\",\n number: \"WU88191207\",\n href: \"#order-3\",\n actions: (\n <ActionLink\n label=\"View invoice\"\n href=\"#invoice-3\"\n variant=\"secondary\"\n />\n ),\n items: orders[0].items.map((item) => ({\n ...item,\n actions: (\n <>\n <Button variant=\"secondary\">\n Buy again<span className=\"m-sr-only\"> {item.name}</span>\n </Button>\n <ActionLink\n label={`View ${item.name.toLowerCase()}`}\n href={item.href ?? \"#product\"}\n variant=\"ghost\"\n />\n </>\n ),\n })),\n },\n ]}\n />\n <OrderHistory\n headingLevel={3}\n orders={[\n {\n ...orders[1],\n id: \"o4\",\n number: \"WU88191322\",\n date: \"16 October 2026\",\n status: \"Shipped on 17 October 2026\",\n href: \"#order-4\",\n progress: [\n { id: \"placed\", name: \"Order placed\", status: \"complete\" },\n { id: \"processing\", name: \"Processing\", status: \"complete\" },\n { id: \"shipped\", name: \"Shipped\", status: \"current\" },\n { id: \"delivered\", name: \"Delivered\", status: \"upcoming\" },\n ],\n },\n ]}\n />\n</Stack>","OrderSummary":"import { Button, OrderSummary, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"xl\">\n <div className=\"max-w-sm\">\n <OrderSummary\n lines={[\n { label: \"Subtotal\", value: \"£68.00\" },\n { label: \"Shipping\", value: \"£4.95\" },\n { label: \"VAT included\", value: \"£11.33\" },\n ]}\n total={{ label: \"Order total\", value: \"£72.95\" }}\n action={<Button>Checkout</Button>}\n />\n </div>\n <div className=\"max-w-sm\"><OrderSummary\n title=\"Your order\"\n lines={[\n { label: \"Subtotal\", value: \"£28.00\" },\n {\n label: \"Shipping estimate\",\n value: \"£4.95\",\n hint: <a href=\"#shipping\">How shipping is worked out</a>,\n },\n {\n label: \"Tax estimate\",\n value: \"£4.67\",\n hint: \"VAT at 20%, confirmed at checkout\",\n },\n ]}\n total={{ label: \"Order total\", value: \"£32.95\" }}\n action={<Button>Checkout</Button>}\n /></div>\n</Stack>","PageFeedback":"import { PageFeedback } from \"@tonycodes-ui/mortar\";\n\n<PageFeedback\n value={helpful}\n onChange={setHelpful}\n updated=\"Updated 2 Oct 2026\"\n/>","PageHeading":"import { Avatar, Button, PageHeading, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"xl\">\n <PageHeading\n title=\"Projects\"\n description=\"Your team’s active projects.\"\n actions={<Button>New project</Button>}\n />\n <PageHeading\n title=\"Back End Developer\"\n headingLevel={2}\n avatar={<Avatar name=\"Northwind\" size=\"lg\" shape=\"square\" />}\n meta={[\n { label: \"Full-time\", icon: icons.clock },\n { label: \"Remote\", icon: icons.inbox },\n { label: \"Closes 9 January 2027\", icon: icons.calendar },\n ]}\n actions={\n <>\n <Button variant=\"secondary\">Edit</Button>\n <Button>Publish</Button>\n </>\n }\n />\n</Stack>","PagerLinks":"import { PagerLinks } from \"@tonycodes-ui/mortar\";\n\n<PagerLinks\n previous={{ label: \"Introduction\", href: \"#intro\" }}\n next={{ label: \"Project structure\", href: \"#structure\" }}\n/>","Pagination":"import { Pagination, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"xl\">\n <Pagination page={page} pageCount={5} onChange={setPage} />\n <Pagination\n label=\"Results pages\"\n numbered\n page={resultsPage}\n pageCount={12}\n onChange={setResultsPage}\n summary={{\n from: (resultsPage - 1) * 10 + 1,\n to: Math.min(resultsPage * 10, 114),\n total: 114,\n }}\n />\n</Stack>","PasswordInput":"import { PasswordInput, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"xl\" className=\"max-w-sm\">\n <PasswordInput\n label=\"Password\"\n value={password}\n onChange={(e) => setPassword(e.target.value)}\n />\n <PasswordInput\n label=\"New password\"\n purpose=\"new\"\n required\n value={created}\n onChange={(e) => setCreated(e.target.value)}\n requirements={passwordRules(created)}\n strength={passwordStrength(created)}\n />\n</Stack>","PlanComparison":"import { PlanComparison } from \"@tonycodes-ui/mortar\";\n\n<PlanComparison\n title=\"Compare plans\"\n plans={[\"Hobby\", \"Team\", \"Enterprise\"]}\n featuredPlan=\"Team\"\n groups={[\n {\n label: \"Builds\",\n rows: [\n { feature: \"Concurrent builds\", values: [\"1\", \"4\", \"Custom\"] },\n { feature: \"Preview comments\", values: [false, true, true] },\n ],\n },\n ]}\n/>","PostList":"import { PostList } from \"@tonycodes-ui/mortar\";\n\n<div>\n <PostList\n title=\"From the blog\"\n action={action}\n posts={[\n {\n href: \"#post\",\n title: \"Example post title\",\n excerpt: \"Illustrative excerpt.\",\n date: \"2026-10-02\",\n dateLabel: \"2 Oct 2026\",\n category: \"Engineering\",\n },\n ]}\n />\n <PostList\n title=\"Latest stories\"\n headingLevel={3}\n posts={[\n {\n href: \"#featured-post\",\n title: \"How a bike shop answers every booking the same day\",\n excerpt:\n \"Harbour Bikes moved phone, email and chat into one inbox. Here is what changed in their first month.\",\n date: \"2026-10-12\",\n dateLabel: \"12 Oct 2026\",\n category: \"Customers\",\n featured: true,\n image: <img alt=\"\" src={scene(800, 500, \"bcd7f0\", \"4f7d5c\")} />,\n },\n {\n href: \"#post-2\",\n title: \"Designing a calmer notification inbox\",\n excerpt: \"Fewer pings, clearer priorities.\",\n date: \"2026-10-05\",\n dateLabel: \"5 Oct 2026\",\n category: \"Design\",\n image: <img alt=\"\" src={scene(800, 500, \"f6d8c4\", \"b0654a\")} />,\n },\n {\n href: \"#post-3\",\n title: \"What we learned from 1,000 support teams\",\n excerpt: \"Patterns from a year of anonymised data.\",\n date: \"2026-09-28\",\n dateLabel: \"28 Sep 2026\",\n category: \"Research\",\n image: <img alt=\"\" src={scene(800, 500, \"dcd3f2\", \"5a4c8f\")} />,\n },\n ]}\n />\n</div>","PreviewFrame":"import { PreviewFrame } from \"@tonycodes-ui/mortar\";\n\n<PreviewFrame label=\"Isolated example\" src=\"about:blank\" />","Pricing":"import { Pricing } from \"@tonycodes-ui/mortar\";\n\n<>\n <Pricing\n title=\"Example plans\"\n description=\"Illustrative pricing, not a purchase.\"\n plans={[\n {\n id: \"basic\",\n name: \"Basic\",\n description: \"Personal projects\",\n monthly: \"$0\",\n annual: \"$0\",\n unit: \"/month\",\n annualUnit: \"/year\",\n features: [\"One project\"],\n action,\n },\n {\n id: \"team\",\n name: \"Team\",\n description: \"Small teams\",\n monthly: \"$20\",\n annual: \"$16\",\n unit: \"/month\",\n annualUnit: \"/year\",\n features: [\"Unlimited projects\"],\n action,\n featured: true,\n },\n ]}\n />\n <Pricing\n title=\"One price, everything included\"\n description=\"A single plan with no tiers to compare.\"\n layout=\"detailed\"\n plans={[\n {\n id: \"lifetime\",\n name: \"Lifetime membership\",\n description: \"Pay once and keep every update.\",\n monthly: \"$349\",\n unit: \"One-time payment, USD\",\n features: [\n \"Private forum access\",\n \"Member resources\",\n \"Entry to annual conference\",\n \"Official member t-shirt\",\n ],\n action: { label: \"Get access\", href: \"#access\" },\n },\n ]}\n />\n <Pricing\n title=\"A plan for every stage\"\n description=\"Four tiers, with a discount for non-profits.\"\n plans={[\n [\"hobby\", \"Hobby\", \"Side projects\", \"$0\"],\n [\"starter\", \"Starter\", \"Solo founders\", \"$12\"],\n [\"growth\", \"Growth\", \"Growing teams\", \"$39\"],\n [\"scale\", \"Scale\", \"Large organisations\", \"$99\"],\n ].map(([id, name, description, monthly]) => ({\n id,\n name,\n description,\n monthly,\n unit: \"/month\",\n features: [\"Unlimited projects\", \"Email support\"],\n action,\n }))}\n extra={{\n name: \"Non-profit\",\n description:\n \"Every Growth feature at a reduced price for registered charities.\",\n price: \"$19\",\n unit: \"/month\",\n action: { label: \"Apply for the discount\", href: \"#nonprofit\" },\n }}\n />\n</>","ProcessSteps":"import { ProcessSteps } from \"@tonycodes-ui/mortar\";\n\n<ProcessSteps\n title=\"How it works\"\n description=\"Live in under five minutes.\"\n items={[\n { title: \"Sign up\", description: \"Create an account.\" },\n { title: \"Configure\", description: \"Set tone and colours.\" },\n { title: \"Train\", description: \"Add documents and pages.\" },\n { title: \"Go live\", description: \"Paste one script tag.\" },\n ]}\n/>","ProductFilters":"import { ProductFilters } from \"@tonycodes-ui/mortar\";\n\n<div className=\"max-w-xs\">\n <ProductFilters\n facets={facets}\n selected={filters}\n onChange={(next) => setFilters(next)}\n />\n <output aria-label=\"Applied filters\">\n {Object.entries(filters)\n .filter(([, values]) => values.length)\n .map(([facet, values]) => `${facet}: ${values.join(\", \")}`)\n .join(\"; \") || \"none\"}\n </output>\n</div>","ProductList":"import { Button, ProductList, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"xl\">\n <ProductList label=\"New arrivals\" products={products} />\n <ProductList\n label=\"Bags and kitchen\"\n variant=\"cards\"\n columns={3}\n products={[\n {\n ...products[0],\n id: \"tote-card\",\n meta: undefined,\n badge: undefined,\n description:\n \"Heavy organic canvas with an inside pocket and leather handles.\",\n swatches: [\n { label: \"Natural\", swatch: \"#d9c9a8\" },\n { label: \"Black\", swatch: \"#26262a\" },\n ],\n action: (\n <Button variant=\"secondary\">\n Add to bag<span className=\"m-sr-only\"> Canvas tote</span>\n </Button>\n ),\n },\n {\n ...products[1],\n id: \"mug-card\",\n meta: undefined,\n description: \"Hand-glazed stoneware that keeps coffee warm.\",\n swatches: [\n { label: \"Sage\", swatch: \"#9fb5a0\" },\n { label: \"Chalk\", swatch: \"#f1efe9\" },\n ],\n action: (\n <Button variant=\"secondary\">\n Add to bag<span className=\"m-sr-only\"> Stoneware mug</span>\n </Button>\n ),\n },\n {\n ...products[2],\n id: \"tee-card\",\n meta: undefined,\n description: \"Midweight organic cotton with a relaxed fit.\",\n swatches: [{ label: \"Charcoal\", swatch: \"#3d3f45\" }],\n action: (\n <Button variant=\"secondary\">\n Add to bag<span className=\"m-sr-only\"> Organic tee</span>\n </Button>\n ),\n },\n ]}\n />\n <ProductList\n label=\"Kitchen and travel\"\n variant=\"overlay\"\n columns={3}\n products={relatedProducts.slice(0, 3)}\n />\n</Stack>","ProductOverview":"import { Divider, ProductOverview } from \"@tonycodes-ui/mortar\";\n\n<>\n <ProductOverview\n name=\"Canvas tote\"\n price=\"£32\"\n description=\"Heavy organic cotton canvas with vegetable-tanned leather handles and an inside pocket.\"\n images={selected.colour === \"black\" ? blackToteImages : toteImages}\n rating={{ value: 4.5, count: 112, href: \"#reviews\" }}\n options={[\n {\n id: \"colour\",\n label: \"Colour\",\n values: [\n { value: \"natural\", label: \"Natural\", swatch: \"#d9c9a8\" },\n { value: \"black\", label: \"Black\", swatch: \"#26262a\" },\n ],\n },\n {\n id: \"size\",\n label: \"Size\",\n values: [\n { value: \"small\", label: \"Small\" },\n { value: \"large\", label: \"Large\" },\n { value: \"travel\", label: \"Travel\", disabled: true },\n ],\n },\n ]}\n selected={selected}\n onSelect={(option, value) =>\n setSelected((current) => ({ ...current, [option]: value }))\n }\n onAdd={() => setAdded((n) => n + 1)}\n details={[\n \"Holds a 16-inch laptop\",\n \"Machine washable\",\n \"Made in Portugal\",\n ]}\n />\n <output aria-label=\"Bag\">\n {added} added · {selected.colour} · {selected.size}\n </output>\n <Divider />\n <ProductOverview\n name=\"Stoneware mug\"\n headingLevel={2}\n price=\"£18\"\n gallery=\"grid\"\n description=\"Hand-glazed stoneware, shown from every side at once.\"\n images={[\n { src: mug(\"9fb5a0\"), alt: \"Sage stoneware mug, front\" },\n { src: mug(\"b8c7b0\"), alt: \"Sage stoneware mug, in daylight\" },\n { src: mug(\"7e9480\"), alt: \"Sage stoneware mug, in shade\" },\n ]}\n addLabel=\"Add mug\"\n onAdd={() => setAdded((n) => n + 1)}\n />\n</>","ProductQuickView":"import { Button, ProductQuickView } from \"@tonycodes-ui/mortar\";\n\n<>\n <Button variant=\"secondary\" onClick={() => setQuick(true)}>\n Quick view\n </Button>\n <ProductQuickView\n open={quick}\n onClose={() => setQuick(false)}\n href=\"#tote\"\n name=\"Canvas tote\"\n price=\"£32\"\n description=\"Heavy organic cotton canvas with leather handles.\"\n images={toteImages}\n rating={{ value: 4.5, count: 112 }}\n options={[\n {\n id: \"size\",\n label: \"Size\",\n values: [\n { value: \"small\", label: \"Small\" },\n { value: \"large\", label: \"Large\" },\n ],\n },\n ]}\n selected={{ size: selected.size }}\n onSelect={(option, value) =>\n setSelected((current) => ({ ...current, [option]: value }))\n }\n onAdd={() => setQuick(false)}\n />\n</>","ProductReviews":"import { Button, ProductReviews, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"xl\">\n <ProductReviews\n average={4.4}\n count={112}\n distribution={[\n { stars: 5, count: 70 },\n { stars: 4, count: 30 },\n { stars: 3, count: 8 },\n { stars: 2, count: 3 },\n { stars: 1, count: 1 },\n ]}\n reviews={reviews}\n action={<Button variant=\"secondary\">Write a review</Button>}\n />\n <ProductReviews\n title=\"Mug reviews\"\n avatars\n average={4.7}\n count={38}\n distribution={[\n { stars: 5, count: 29 },\n { stars: 4, count: 7 },\n { stars: 3, count: 2 },\n { stars: 2, count: 0 },\n { stars: 1, count: 0 },\n ]}\n reviews={[\n {\n id: \"m1\",\n author: \"Lindsay Walton\",\n rating: 5,\n date: \"4 October 2026\",\n title: \"My morning favourite\",\n body: \"The glaze is lovely and it keeps coffee warm for ages.\",\n },\n {\n id: \"m2\",\n author: \"Courtney Henry\",\n rating: 4,\n date: \"21 September 2026\",\n title: \"Heavier than expected\",\n body: \"Beautiful mug, though it is quite weighty when full.\",\n },\n ]}\n action={<Button variant=\"secondary\">Review the mug</Button>}\n />\n</Stack>","ProgressBar":"import { ProgressBar, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"lg\">\n <ProgressBar\n label=\"Build minutes\"\n value={4120}\n max={6000}\n valueLabel=\"4,120 / 6,000\"\n />\n <ProgressBar\n label=\"Storage\"\n value={92}\n valueLabel=\"92%\"\n tone=\"warning\"\n />\n</Stack>","ProgressSteps":"import { ProgressSteps, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"xl\">\n <ProgressSteps\n label=\"Job application\"\n steps={[\n {\n id: \"details\",\n name: \"Job details\",\n href: \"#details\",\n status: \"complete\",\n },\n { id: \"form\", name: \"Application form\", status: \"current\" },\n { id: \"preview\", name: \"Preview\", status: \"upcoming\" },\n ]}\n />\n <div className=\"max-w-md\">\n <ProgressSteps\n label=\"Account setup\"\n variant=\"circles\"\n steps={[\n {\n id: \"account\",\n name: \"Create account\",\n description: \"Vitae sed mi luctus laoreet.\",\n href: \"#account\",\n status: \"complete\",\n },\n {\n id: \"profile\",\n name: \"Profile information\",\n description: \"Cursus semper viverra facilisis et et.\",\n status: \"current\",\n },\n {\n id: \"business\",\n name: \"Business information\",\n description: \"Penatibus eu quis ante.\",\n status: \"upcoming\",\n },\n ]}\n />\n </div>\n <ProgressSteps\n label=\"Checkout\"\n variant=\"bullets\"\n steps={[\n {\n id: \"cart\",\n name: \"Cart\",\n href: \"#cart\",\n status: \"complete\",\n },\n { id: \"shipping\", name: \"Shipping\", status: \"current\" },\n { id: \"payment\", name: \"Payment\", status: \"upcoming\" },\n { id: \"review\", name: \"Review\", status: \"upcoming\" },\n ]}\n />\n <ProgressSteps\n label=\"Order WU88191322 progress\"\n variant=\"bar\"\n navigation={false}\n steps={[\n { id: \"placed\", name: \"Order placed\", status: \"complete\" },\n { id: \"processing\", name: \"Processing\", status: \"complete\" },\n { id: \"shipped\", name: \"Shipped\", status: \"current\" },\n { id: \"delivered\", name: \"Delivered\", status: \"upcoming\" },\n ]}\n />\n</Stack>","Prose":"import { Prose } from \"@tonycodes-ui/mortar\";\n\n<Prose>\n <h2>Build cache</h2>\n <p>\n Caches <code>node_modules</code> between builds.\n </p>\n</Prose>","ProviderButtons":"import { Divider, ProviderButtons, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"xl\" className=\"max-w-sm\">\n <ProviderButtons\n label=\"Sign in with\"\n providers={[\n {\n id: \"github\",\n label: \"Continue with GitHub\",\n icon: authIcons.code,\n onSelect: () => setSelected(\"github\"),\n },\n {\n id: \"google\",\n label: \"Continue with Google\",\n icon: authIcons.globe,\n onSelect: () => setSelected(\"google\"),\n },\n ]}\n />\n <Divider label=\"or continue with\" soft spacing=\"none\" />\n <ProviderButtons\n layout=\"grid\"\n providers={[\n {\n id: \"github\",\n label: \"GitHub\",\n icon: authIcons.code,\n onSelect: () => setSelected(\"github\"),\n },\n {\n id: \"sso\",\n label: \"SSO\",\n icon: authIcons.key,\n onSelect: () => setSelected(\"sso\"),\n },\n ]}\n />\n <output aria-label=\"Chosen provider\">{selected}</output>\n</Stack>","RadioGroup":"import { RadioGroup, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"xl\">\n <RadioGroup\n label=\"Plan\"\n name=\"plan\"\n value={value}\n onChange={setValue}\n options={[\n {\n value: \"first\",\n label: \"Standard\",\n description: \"For small teams\",\n },\n {\n value: \"second\",\n label: \"Advanced\",\n description: \"For growing teams\",\n },\n ]}\n />\n <RadioGroup\n label=\"Memory\"\n name=\"memory\"\n layout=\"grid\"\n value={memory}\n onChange={setMemory}\n options={[\n { value: \"8\", label: \"8 GB\", description: \"£0\" },\n { value: \"16\", label: \"16 GB\", description: \"+ £200\" },\n { value: \"32\", label: \"32 GB\", description: \"+ £400\" },\n {\n value: \"64\",\n label: \"64 GB\",\n description: \"Out of stock\",\n disabled: true,\n },\n ]}\n />\n <RadioGroup\n label=\"Colour\"\n name=\"colour\"\n layout=\"swatches\"\n value={colour}\n onChange={setColour}\n options={[\n { value: \"rose\", label: \"Rose\", swatch: \"#e8a3b4\" },\n { value: \"sky\", label: \"Sky\", swatch: \"#8bbcdc\" },\n { value: \"slate\", label: \"Slate\", swatch: \"#475569\" },\n ]}\n />\n <output aria-label=\"Chosen options\">\n {memory} · {colour}\n </output>\n</Stack>","Release":"import { Release } from \"@tonycodes-ui/mortar\";\n\n<Release\n version=\"v3.2.0\"\n date=\"2026-10-02\"\n dateLabel=\"2 Oct 2026\"\n changes={[\n { type: \"added\", items: [\"Password-protected previews.\"] },\n { type: \"deprecated\", items: [\"The --prod flag.\"] },\n ]}\n/>","SaveBar":"import { SaveBar } from \"@tonycodes-ui/mortar\";\n\n<SaveBar\n open={dirty}\n onSave={() => setDirty(false)}\n onDiscard={() => setDirty(false)}\n/>","SearchDialog":"import { SearchDialog, SearchTrigger } from \"@tonycodes-ui/mortar\";\n\n<>\n <SearchTrigger onOpen={() => setOpen(true)} />\n <SearchDialog\n open={open}\n onClose={() => setOpen(false)}\n query={query}\n onQueryChange={setQuery}\n groups={groups}\n />\n</>","SearchTrigger":"import { SearchDialog, SearchTrigger } from \"@tonycodes-ui/mortar\";\n\n<>\n <SearchTrigger onOpen={() => setOpen(true)} />\n <SearchDialog\n open={open}\n onClose={() => setOpen(false)}\n query={query}\n onQueryChange={setQuery}\n groups={groups}\n />\n</>","SectionHeading":"import { Button, SectionHeading, Stack, TabNav } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"xl\">\n <SectionHeading\n title=\"Job postings\"\n description=\"Open roles across your teams.\"\n actions={\n <>\n <Button variant=\"secondary\">Share</Button>\n <Button>Create posting</Button>\n </>\n }\n />\n <SectionHeading\n title=\"Recent activity\"\n headingLevel={3}\n divider={false}\n />\n <SectionHeading\n title=\"Candidates\"\n actions={<Button>Add candidate</Button>}\n tabs={\n <TabNav\n label=\"Candidate stages\"\n items={[\n { label: \"Applied\", href: \"#applied\" },\n {\n label: \"Phone screening\",\n href: \"#screening\",\n current: true,\n },\n { label: \"Interview\", href: \"#interview\" },\n { label: \"Offer\", href: \"#offer\" },\n { label: \"Hired\", href: \"#hired\" },\n ]}\n />\n }\n />\n</Stack>","Section":"import { ActionLink, CheckList, Section, Stack } from \"@tonycodes-ui/mortar\";\n\n<>\n <Section\n eyebrow=\"Muted band\"\n title=\"Sections alternate rhythm\"\n description=\"Use tones to separate consecutive sections.\"\n tone=\"muted\"\n >\n <CheckList items={[\"No wrapper markup\", \"No page overflow\"]} />\n </Section>\n <Section\n title=\"Inverse band\"\n description=\"Tokens flip locally, so components stay legible.\"\n tone=\"inverse\"\n align=\"center\"\n >\n <Stack direction=\"row\" justify=\"center\">\n <ActionLink label=\"Explore\" href=\"#example\" />\n <CheckList items={[\"Included feature\"]} />\n </Stack>\n </Section>\n</>","SegmentedControl":"import { SegmentedControl } from \"@tonycodes-ui/mortar\";\n\n<SegmentedControl\n label=\"View\"\n value={value}\n onChange={setValue}\n options={[\n { value: \"first\", label: \"Overview\" },\n { value: \"second\", label: \"Activity\" },\n ]}\n/>","Select":"import { Select } from \"@tonycodes-ui/mortar\";\n\n<>\n <Select\n label=\"Environment\"\n value={value}\n onChange={(e) => setValue(e.target.value)}\n options={[\n { value: \"first\", label: \"Production\" },\n { value: \"second\", label: \"Preview\" },\n ]}\n />\n <Select\n label=\"Unavailable environment\"\n disabled\n defaultValue=\"production\"\n hint=\"Your current environment is managed centrally.\"\n options={[{ value: \"production\", label: \"Production\" }]}\n />\n <Select\n label=\"Required environment\"\n defaultValue=\"\"\n error=\"Choose an environment.\"\n options={[\n { value: \"\", label: \"Choose an environment\" },\n { value: \"production\", label: \"Production\" },\n ]}\n />\n</>","SettingsSection":"import { Button, Input, SettingsSection } from \"@tonycodes-ui/mortar\";\n\n<SettingsSection\n title=\"General\"\n description=\"Manage project details.\"\n>\n <Input\n label=\"Project name\"\n defaultValue=\"Northwind\"\n hint=\"A name for your workspace\"\n />\n <Button>Save changes</Button>\n</SettingsSection>","ShoppingCart":"import { ActionLink, Button, Divider, OrderSummary, ShoppingCart } from \"@tonycodes-ui/mortar\";\n\n<>\n <ShoppingCart\n items={items}\n onQuantityChange={(id, quantity) =>\n setItems((current) =>\n current.map((item) =>\n item.id === id ? { ...item, quantity } : item,\n ),\n )\n }\n onRemove={(id) =>\n setItems((current) => current.filter((item) => item.id !== id))\n }\n empty={{\n title: \"Your bag is empty\",\n description: \"Items you add will appear here.\",\n action: <ActionLink label=\"Continue shopping\" href=\"#shop\" />,\n }}\n />\n <output aria-label=\"Bag count\">\n {items.reduce((n, item) => n + item.quantity, 0)}\n </output>\n <Divider />\n <ShoppingCart\n label=\"Items in your saved bag\"\n items={extended}\n onQuantityChange={(id, quantity) =>\n setExtended((current) =>\n current.map((item) =>\n item.id === id ? { ...item, quantity } : item,\n ),\n )\n }\n onRemove={(id) =>\n setExtended((current) => current.filter((item) => item.id !== id))\n }\n summary=<OrderSummary\n title=\"Your order\"\n lines={[\n { label: \"Subtotal\", value: \"£28.00\" },\n {\n label: \"Shipping estimate\",\n value: \"£4.95\",\n hint: <a href=\"#shipping\">How shipping is worked out</a>,\n },\n {\n label: \"Tax estimate\",\n value: \"£4.67\",\n hint: \"VAT at 20%, confirmed at checkout\",\n },\n ]}\n total={{ label: \"Order total\", value: \"£32.95\" }}\n action={<Button>Checkout</Button>}\n />\n related={{\n title: \"You may also like\",\n products: relatedProducts,\n }}\n />\n</>","Sidebar":"import { Avatar, Sidebar } from \"@tonycodes-ui/mortar\";\n\n<div className=\"max-w-xs\">\n <Sidebar\n brand=\"Northwind\"\n workspace=\"Acme workspace\"\n homeHref=\"#home\"\n navigation={[\n {\n label: \"Dashboard\",\n href: \"#dashboard\",\n current: true,\n icon: icons.home,\n },\n { label: \"Team\", href: \"#team\", icon: icons.team },\n {\n label: \"Reports\",\n href: \"#reports\",\n icon: icons.calendar,\n children: [\n { label: \"Revenue\", href: \"#revenue\" },\n { label: \"Retention\", href: \"#retention\" },\n ],\n },\n {\n label: \"Projects\",\n href: \"#projects\",\n count: \"12\",\n icon: icons.folder,\n },\n { label: \"Calendar\", href: \"#calendar\", icon: icons.calendar },\n ]}\n sections={[\n {\n label: \"Your teams\",\n items: [\n { label: \"Engineering\", href: \"#engineering\" },\n { label: \"Design\", href: \"#design\" },\n ],\n },\n ]}\n footer={<Avatar name=\"Ana Kovač\" size=\"sm\" />}\n />\n</div>","SignInPanel":"import { SignInPanel, Stack, Text } from \"@tonycodes-ui/mortar\";\n\n<SignInPanel\n title=\"Sign in\"\n description=\"Use your work account to continue.\"\n providers={[\n {\n id: \"github\",\n label: \"Continue with GitHub\",\n onSelect: () => setSelected(true),\n },\n ]}\n email={{ onSubmit: setSubmitted }}\n footer=\"By continuing you agree to the terms of service.\"\n aside={\n <Stack gap=\"md\">\n <Text size=\"lg\" weight=\"medium\">\n “We answered twice as many customers in the first month.”\n </Text>\n <Text color=\"muted\" size=\"sm\">\n Lindsay Walton, Wheelhouse Bikes\n </Text>\n </Stack>\n }\n/>","SlideOver":"import { Button, Input, SlideOver } from \"@tonycodes-ui/mortar\";\n\n<>\n {trigger(\"Add variable\")}\n <SlideOver\n open={open}\n onClose={() => setOpen(false)}\n title=\"Add environment variable\"\n description=\"Applies to the next deployment.\"\n size=\"lg\"\n actions={\n <>\n <Button variant=\"secondary\" onClick={() => setOpen(false)}>\n Cancel\n </Button>\n <Button onClick={() => setOpen(false)}>\n Save variable\n </Button>\n </>\n }\n >\n <Input label=\"Key\" defaultValue=\"API_KEY\" />\n </SlideOver>\n</>","Stack":"import { Button, Stack, Text } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"lg\">\n <Stack direction=\"row\" gap=\"sm\" wrap>\n <Button>Primary</Button>\n <Button variant=\"secondary\">Secondary</Button>\n </Stack>\n <Stack gap=\"xs\">\n <Text weight=\"semibold\">Compact group</Text>\n <Text color=\"muted\">Related lines sit close together.</Text>\n </Stack>\n</Stack>","StackedList":"import { Avatar, Badge, Stack, StackedList } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"xl\">\n <StackedList\n title=\"Members\"\n action={<a href=\"#manage\">Manage</a>}\n items={[\n {\n id: \"1\",\n title: \"Ana Kovač\",\n description: \"ana@example.com\",\n leading: <Avatar name=\"Ana Kovač\" decorative />,\n trailing: <Badge>Owner</Badge>,\n },\n ]}\n />\n <StackedList\n label=\"Recent files\"\n action={<a href=\"#files\">View all files</a>}\n items={[\n {\n id: \"brief\",\n title: \"Launch brief.pdf\",\n description: \"Updated 2 hours ago\",\n href: \"#brief\",\n },\n ]}\n />\n <StackedList\n label=\"Directory\"\n groups={[\n {\n label: \"A\",\n items: [\n {\n id: \"ana\",\n title: \"Ana Kovač\",\n description: \"Engineering\",\n leading: (\n <Avatar name=\"Ana Kovač\" size=\"sm\" decorative />\n ),\n },\n {\n id: \"arlene\",\n title: \"Arlene Mccoy\",\n description: \"Design\",\n leading: (\n <Avatar name=\"Arlene Mccoy\" size=\"sm\" decorative />\n ),\n },\n ],\n },\n {\n label: \"T\",\n items: [\n {\n id: \"tom\",\n title: \"Tom Cook\",\n description: \"Design\",\n leading: <Avatar name=\"Tom Cook\" size=\"sm\" decorative />,\n },\n {\n id: \"tanya\",\n title: \"Tanya Fox\",\n description: \"Marketing\",\n leading: (\n <Avatar name=\"Tanya Fox\" size=\"sm\" decorative />\n ),\n },\n ],\n },\n ]}\n />\n <StackedList\n title=\"People\"\n chevrons\n items={[\n {\n id: \"leslie\",\n title: \"Leslie Alexander\",\n description: \"leslie.alexander@example.com\",\n leading: <Avatar name=\"Leslie Alexander\" decorative />,\n meta: (\n <>\n <span>Co-founder / CEO</span>\n <span>Last seen 3h ago</span>\n </>\n ),\n href: \"#leslie\",\n },\n {\n id: \"michael\",\n title: \"Michael Foster\",\n description: \"michael.foster@example.com\",\n leading: <Avatar name=\"Michael Foster\" decorative />,\n meta: (\n <>\n <span>Co-founder / CTO</span>\n <span>Online</span>\n </>\n ),\n href: \"#michael\",\n },\n ]}\n />\n</Stack>","StackedShell":"import { Avatar, MetricGroup, PageHeading, StackedShell } from \"@tonycodes-ui/mortar\";\n\n<StackedShell\n brand=\"Northwind\"\n homeHref=\"#home\"\n navigation={[\n { label: \"Dashboard\", href: \"#dashboard\", current: true },\n { label: \"Team\", href: \"#team\" },\n { label: \"Projects\", href: \"#projects\" },\n { label: \"Calendar\", href: \"#calendar\" },\n ]}\n actions={<Avatar name=\"Ana Kovač\" size=\"sm\" />}\n header={\n <PageHeading\n title=\"Dashboard\"\n description=\"What changed across your projects this week.\"\n />\n }\n>\n <MetricGroup\n label=\"This week\"\n items={[\n { label: \"Deploys\", value: \"48\", change: \"+6\", tone: \"success\" },\n { label: \"Incidents\", value: \"1\", change: \"−2\", tone: \"success\" },\n ]}\n />\n</StackedShell>","StatGroup":"import { Stack, StatGroup } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"xl\">\n <StatGroup\n label=\"Platform numbers\"\n items={[\n { value: \"99.99%\", label: \"Uptime\" },\n { value: \"41s\", label: \"Median build\" },\n ]}\n />\n <StatGroup\n label=\"Support numbers\"\n items={[\n {\n value: \"4 min\",\n label: \"First response\",\n description: \"Median across every channel last quarter.\",\n },\n {\n value: \"92%\",\n label: \"Solved on first reply\",\n description: \"Customers rarely need to ask twice.\",\n },\n {\n value: \"24/7\",\n label: \"Coverage\",\n description: \"Follow-the-sun teams in three time zones.\",\n },\n ]}\n />\n <StatGroup\n label=\"Company numbers\"\n background={<img alt=\"\" src={scenes[0]} />}\n items={[\n { value: \"8,000+\", label: \"Creators on the platform\" },\n { value: \"3%\", label: \"Flat platform fee\" },\n { value: \"99.9%\", label: \"Uptime guarantee\" },\n { value: \"$70M\", label: \"Paid out to creators\" },\n ]}\n />\n <StatGroup\n label=\"Company milestones\"\n layout=\"timeline\"\n items={[\n {\n value: \"Aug 2021\",\n label: \"Founded company\",\n description: \"Two engineers and a shared design system.\",\n },\n {\n value: \"Dec 2021\",\n label: \"Secured funding\",\n description: \"A seed round to grow the team.\",\n },\n {\n value: \"Feb 2022\",\n label: \"Released beta\",\n description: \"Forty teams joined in the first month.\",\n },\n {\n value: \"Dec 2022\",\n label: \"Global launch\",\n description: \"Available in every region.\",\n },\n ]}\n />\n <StatGroup\n label=\"Growth\"\n layout=\"stepped\"\n items={[\n {\n value: \"250k\",\n label: \"Users on the platform\",\n description: \"Across 40 countries.\",\n },\n {\n value: \"$8.9B\",\n label: \"Processed every quarter\",\n description: \"With no downtime last year.\",\n },\n {\n value: \"401k\",\n label: \"Projects created\",\n description: \"Most in their first week.\",\n },\n ]}\n />\n</Stack>","Steps":"import { Steps } from \"@tonycodes-ui/mortar\";\n\n<Steps\n items={[\n { title: \"Sign up\", description: \"Create an account.\" },\n { title: \"Configure\", description: \"Choose a theme.\" },\n ]}\n/>","Switch":"import { Stack, Switch } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"sm\">\n <Switch\n label=\"Automatic updates\"\n checked={checked}\n onChange={(e) => setChecked(e.target.checked)}\n />\n <Switch\n label=\"Annual billing\"\n description=\"Save 10% when you pay for a year up front.\"\n checked={extra}\n onChange={(e) => setExtra(e.target.checked)}\n />\n</Stack>","TabNav":"import { Stack, TabNav } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"xl\">\n <TabNav\n label=\"Settings\"\n items={[\n { label: \"General\", href: \"#general\", icon: icons.home },\n { label: \"Billing\", href: \"#billing\", icon: icons.card },\n {\n label: \"Team\",\n href: \"#team\",\n icon: icons.team,\n current: true,\n count: 4,\n },\n { label: \"Projects\", href: \"#projects\", icon: icons.folder },\n ]}\n />\n <TabNav\n label=\"Candidates\"\n variant=\"pills\"\n items={[\n { label: \"Applied\", href: \"#applied\", count: 52 },\n {\n label: \"Phone screening\",\n href: \"#screening\",\n count: 6,\n current: true,\n },\n { label: \"Interview\", href: \"#interview\", count: 4 },\n { label: \"Offer\", href: \"#offer\" },\n ]}\n />\n <TabNav\n label=\"Account\"\n fullWidth\n items={[\n { label: \"My account\", href: \"#account\", current: true },\n { label: \"Company\", href: \"#company\" },\n { label: \"Team members\", href: \"#members\" },\n ]}\n />\n</Stack>","Table":"import { Stack, Table } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"xl\">\n <Table\n caption=\"Plan limits\"\n captionVisible\n columns={[\n { key: \"plan\", label: \"Plan\" },\n { key: \"conversations\", label: \"Conversations\", align: \"end\" },\n { key: \"support\", label: \"Support\" },\n ]}\n rows={[\n { plan: \"Insider\", conversations: \"100\", support: \"Community\" },\n { plan: \"Starter\", conversations: \"500\", support: \"Email\" },\n { plan: \"Pro\", conversations: \"2,000\", support: \"Priority\" },\n ]}\n />\n <Table\n caption=\"People by office\"\n columns={[\n { key: \"name\", label: \"Name\" },\n { key: \"title\", label: \"Title\" },\n { key: \"role\", label: \"Role\" },\n ]}\n groups={[\n {\n label: \"Edinburgh\",\n rows: [\n {\n name: \"Lindsay Walton\",\n title: \"Front-end developer\",\n role: \"Member\",\n },\n { name: \"Courtney Henry\", title: \"Designer\", role: \"Admin\" },\n ],\n },\n {\n label: \"London\",\n rows: [\n {\n name: \"Tom Cook\",\n title: \"Director of product\",\n role: \"Admin\",\n },\n {\n name: \"Whitney Francis\",\n title: \"Copywriter\",\n role: \"Member\",\n },\n ],\n },\n ]}\n />\n</Stack>","Tabs":"import { Stack, Tabs } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"xl\">\n <Tabs\n label=\"Example tabs\"\n value={value}\n onChange={setValue}\n items={[\n {\n id: \"first\",\n label: \"Overview\",\n content: <p>Overview content</p>,\n },\n {\n id: \"second\",\n label: \"Activity\",\n count: 12,\n icon: icons.clock,\n content: <p>Activity content</p>,\n },\n ]}\n />\n <Tabs\n label=\"Account sections\"\n variant=\"pills\"\n value={section}\n onChange={setSection}\n items={[\n { id: \"profile\", label: \"Profile\", content: <p>Profile form</p> },\n { id: \"billing\", label: \"Billing\", content: <p>Invoices</p> },\n { id: \"team\", label: \"Team\", content: <p>Team members</p> },\n ]}\n />\n <Tabs\n label=\"Billing period\"\n fullWidth\n value={period}\n onChange={setPeriod}\n items={[\n {\n id: \"monthly\",\n label: \"Monthly\",\n content: <p>Billed monthly</p>,\n },\n { id: \"yearly\", label: \"Yearly\", content: <p>Billed yearly</p> },\n ]}\n />\n</Stack>","TeamGrid":"import { TeamGrid } from \"@tonycodes-ui/mortar\";\n\n<div>\n <TeamGrid\n title=\"The people behind the product\"\n members={[\n {\n name: \"Ana Kovač\",\n role: \"Founder\",\n bio: \"Ran support for a bike shop before building Northwind.\",\n links: [\n {\n label: \"Ana Kovač's website\",\n href: \"#ana-web\",\n icon: icons.globe,\n },\n {\n label: \"Ana Kovač on GitHub\",\n href: \"#ana-gh\",\n icon: icons.code,\n },\n ],\n },\n { name: \"Ben Lee\", role: \"Engineering\" },\n ]}\n />\n <TeamGrid\n title=\"Leadership\"\n headingLevel={3}\n layout=\"large\"\n members={[\n {\n name: \"Cy Moreno\",\n role: \"Chief executive\",\n image: <img alt=\"\" src={portrait(\"e9dccb\", \"8a6a4f\")} />,\n },\n {\n name: \"Di Novak\",\n role: \"Chief technology officer\",\n image: <img alt=\"\" src={portrait(\"cfe0e8\", \"3f6577\")} />,\n },\n {\n name: \"Ed Okafor\",\n role: \"Head of design\",\n image: <img alt=\"\" src={portrait(\"e3dcef\", \"5d4b85\")} />,\n },\n ]}\n />\n <TeamGrid\n title=\"Support leads\"\n headingLevel={3}\n layout=\"list\"\n members={[\n {\n name: \"Flo Park\",\n role: \"Support, Europe\",\n bio: \"Leads a team of twelve across three time zones and writes most of our help centre.\",\n image: <img alt=\"\" src={portrait(\"d8e8d0\", \"4d7550\")} />,\n links: [\n {\n label: \"Flo Park on GitHub\",\n href: \"#flo-gh\",\n icon: icons.code,\n },\n ],\n },\n {\n name: \"Gil Ruiz\",\n role: \"Support, Americas\",\n bio: \"Joined from a customer team and still answers tickets every Friday.\",\n image: <img alt=\"\" src={portrait(\"f2dcd6\", \"9a4f45\")} />,\n },\n ]}\n />\n</div>","TestimonialGrid":"import { TestimonialGrid } from \"@tonycodes-ui/mortar\";\n\n<div>\n <TestimonialGrid\n title=\"Teams ship faster\"\n items={[\n {\n quote: \"Illustrative quote for the preview.\",\n name: \"Example customer\",\n role: \"Example role\",\n },\n ]}\n />\n <TestimonialGrid\n title=\"What support teams say\"\n headingLevel={3}\n layout=\"grid\"\n items={[\n {\n quote:\n \"We answered every booking request the same day for the first time. The shared inbox replaced three tools and a spreadsheet.\",\n name: \"Ana Kovač\",\n role: \"Owner, Harbour Bikes\",\n featured: true,\n },\n {\n quote: \"Setup took an afternoon.\",\n name: \"Ben Lee\",\n role: \"Office manager\",\n },\n {\n quote: \"Our clients notice how quickly we reply now.\",\n name: \"Cy Moreno\",\n role: \"Agency lead\",\n },\n {\n quote: \"Scheduling alone saves us hours a week.\",\n name: \"Di Novak\",\n role: \"Clinic director\",\n },\n {\n quote: \"The reports are clear enough to share with the board.\",\n name: \"Ed Okafor\",\n role: \"Operations\",\n },\n ]}\n />\n <TestimonialGrid\n title=\"Masonry with a featured quote\"\n headingLevel={3}\n items={[\n {\n quote:\n \"Northwind is the first support tool the whole team actually opens every morning.\",\n name: \"Flo Park\",\n role: \"Head of support\",\n featured: true,\n },\n {\n quote: \"Short and to the point.\",\n name: \"Gil Ruiz\",\n role: \"Founder\",\n },\n {\n quote:\n \"A longer quote shows how masonry columns keep their own heights instead of stretching to match the tallest card in the row.\",\n name: \"Hana Ito\",\n role: \"Product lead\",\n },\n {\n quote: \"Booking links changed how customers reach us.\",\n name: \"Ivo Petrov\",\n role: \"Studio owner\",\n },\n ]}\n />\n</div>","Testimonial":"import { Avatar, Testimonial } from \"@tonycodes-ui/mortar\";\n\n<>\n <Testimonial\n quote=\"The example shows how a testimonial appears.\"\n name=\"Example customer\"\n role=\"Illustrative content\"\n />\n <Testimonial\n quote=\"We answered twice as many customers in the first month.\"\n name=\"Lindsay Walton\"\n role=\"Owner, Wheelhouse Bikes\"\n logo={\n <img\n alt=\"Wheelhouse Bikes\"\n src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 28'%3E%3Ccircle cx='14' cy='14' r='11' fill='none' stroke='%238e8e93' stroke-width='3'/%3E%3Crect x='32' y='10' width='80' height='8' rx='4' fill='%238e8e93'/%3E%3C/svg%3E\"\n />\n }\n avatar={<Avatar name=\"Lindsay Walton\" />}\n />\n</>","TextArea":"import { TextArea } from \"@tonycodes-ui/mortar\";\n\n<TextArea\n label=\"Description\"\n defaultValue=\"Shared component preview\"\n/>","Text":"import { Stack, Text } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"sm\">\n <Text size=\"lg\" weight=\"semibold\">\n Large semibold\n </Text>\n <Text>Default body copy.</Text>\n <Text color=\"secondary\">Secondary supporting copy.</Text>\n <Text color=\"muted\" size=\"sm\">\n Muted small print.\n </Text>\n</Stack>","ThemeProvider":"import { AppearanceControl, Button, Input, ThemeProvider } from \"@tonycodes-ui/mortar\";\n\n<ThemeProvider brand=\"neutral\" density=\"comfortable\" initialAppearance=\"system\">\n <AppearanceControl />\n <Button>Primary action</Button>\n <Input\n label=\"Project name\"\n defaultValue=\"Northwind\"\n hint=\"A name for your workspace\"\n />\n</ThemeProvider>","Toast":"import { Avatar, Stack, Toast } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"md\">\n <Toast\n title=\"Payment method expired\"\n description=\"Update it to keep builds running.\"\n tone=\"danger\"\n action={{ label: \"Update\", onSelect: () => setSelected(true) }}\n />\n <Toast\n title=\"Ana Kovač replied\"\n description=\"“Looks good — ship it on Friday.”\"\n leading={<Avatar name=\"Ana Kovač\" size=\"sm\" />}\n action={{ label: \"Reply\", onSelect: () => {} }}\n secondaryAction={{ label: \"Mark as read\", onSelect: () => {} }}\n />\n</Stack>","Toaster":"import { Button, Toaster } from \"@tonycodes-ui/mortar\";\n\n<>\n <Button\n onClick={() =>\n setToasts((t) => [\n ...t,\n {\n id: String(Date.now()),\n title: \"Copied URL\",\n tone: \"neutral\",\n },\n ])\n }\n >\n Show toast\n </Button>\n <Toaster\n items={toasts}\n onDismiss={(id) => setToasts((t) => t.filter((x) => x.id !== id))}\n />\n</>"},"inherited":{"Button":0,"Checkbox":1,"CodeInput":2,"Input":3,"PasswordInput":4,"Select":5,"Switch":6,"TextArea":7},"inheritedSets":[["about","accessKey","aria-activedescendant","aria-atomic","aria-autocomplete","aria-braillelabel","aria-brailleroledescription","aria-busy","aria-checked","aria-colcount","aria-colindex","aria-colindextext","aria-colspan","aria-controls","aria-current","aria-describedby","aria-description","aria-details","aria-disabled","aria-dropeffect","aria-errormessage","aria-expanded","aria-flowto","aria-grabbed","aria-haspopup","aria-hidden","aria-invalid","aria-keyshortcuts","aria-label","aria-labelledby","aria-level","aria-live","aria-modal","aria-multiline","aria-multiselectable","aria-orientation","aria-owns","aria-placeholder","aria-posinset","aria-pressed","aria-readonly","aria-relevant","aria-required","aria-roledescription","aria-rowcount","aria-rowindex","aria-rowindextext","aria-rowspan","aria-selected","aria-setsize","aria-sort","aria-valuemax","aria-valuemin","aria-valuenow","aria-valuetext","autoCapitalize","autoCorrect","autoFocus","autoSave","children","className","color","content","contentEditable","contextMenu","dangerouslySetInnerHTML","datatype","defaultChecked","defaultValue","dir","disabled","draggable","enterKeyHint","exportparts","form","formAction","formEncType","formMethod","formNoValidate","formTarget","hidden","id","inert","inlist","inputMode","is","itemID","itemProp","itemRef","itemScope","itemType","key","lang","name","nonce","onAbort","onAbortCapture","onAnimationEnd","onAnimationEndCapture","onAnimationIteration","onAnimationIterationCapture","onAnimationStart","onAnimationStartCapture","onAuxClick","onAuxClickCapture","onBeforeInput","onBeforeInputCapture","onBeforeToggle","onBlur","onBlurCapture","onCanPlay","onCanPlayCapture","onCanPlayThrough","onCanPlayThroughCapture","onChange","onChangeCapture","onClick","onClickCapture","onCompositionEnd","onCompositionEndCapture","onCompositionStart","onCompositionStartCapture","onCompositionUpdate","onCompositionUpdateCapture","onContextMenu","onContextMenuCapture","onCopy","onCopyCapture","onCut","onCutCapture","onDoubleClick","onDoubleClickCapture","onDrag","onDragCapture","onDragEnd","onDragEndCapture","onDragEnter","onDragEnterCapture","onDragExit","onDragExitCapture","onDragLeave","onDragLeaveCapture","onDragOver","onDragOverCapture","onDragStart","onDragStartCapture","onDrop","onDropCapture","onDurationChange","onDurationChangeCapture","onEmptied","onEmptiedCapture","onEncrypted","onEncryptedCapture","onEnded","onEndedCapture","onError","onErrorCapture","onFocus","onFocusCapture","onGotPointerCapture","onGotPointerCaptureCapture","onInput","onInputCapture","onInvalid","onInvalidCapture","onKeyDown","onKeyDownCapture","onKeyPress","onKeyPressCapture","onKeyUp","onKeyUpCapture","onLoad","onLoadCapture","onLoadStart","onLoadStartCapture","onLoadedData","onLoadedDataCapture","onLoadedMetadata","onLoadedMetadataCapture","onLostPointerCapture","onLostPointerCaptureCapture","onMouseDown","onMouseDownCapture","onMouseEnter","onMouseLeave","onMouseMove","onMouseMoveCapture","onMouseOut","onMouseOutCapture","onMouseOver","onMouseOverCapture","onMouseUp","onMouseUpCapture","onPaste","onPasteCapture","onPause","onPauseCapture","onPlay","onPlayCapture","onPlaying","onPlayingCapture","onPointerCancel","onPointerCancelCapture","onPointerDown","onPointerDownCapture","onPointerEnter","onPointerLeave","onPointerMove","onPointerMoveCapture","onPointerOut","onPointerOutCapture","onPointerOver","onPointerOverCapture","onPointerUp","onPointerUpCapture","onProgress","onProgressCapture","onRateChange","onRateChangeCapture","onReset","onResetCapture","onScroll","onScrollCapture","onScrollEnd","onScrollEndCapture","onSeeked","onSeekedCapture","onSeeking","onSeekingCapture","onSelect","onSelectCapture","onStalled","onStalledCapture","onSubmit","onSubmitCapture","onSuspend","onSuspendCapture","onTimeUpdate","onTimeUpdateCapture","onToggle","onTouchCancel","onTouchCancelCapture","onTouchEnd","onTouchEndCapture","onTouchMove","onTouchMoveCapture","onTouchStart","onTouchStartCapture","onTransitionCancel","onTransitionCancelCapture","onTransitionEnd","onTransitionEndCapture","onTransitionRun","onTransitionRunCapture","onTransitionStart","onTransitionStartCapture","onVolumeChange","onVolumeChangeCapture","onWaiting","onWaitingCapture","onWheel","onWheelCapture","part","popover","popoverTarget","popoverTargetAction","prefix","property","radioGroup","ref","rel","resource","results","rev","role","security","slot","spellCheck","style","suppressContentEditableWarning","suppressHydrationWarning","tabIndex","title","translate","type","typeof","unselectable","value","vocab"],["about","accept","accessKey","alt","aria-activedescendant","aria-atomic","aria-autocomplete","aria-braillelabel","aria-brailleroledescription","aria-busy","aria-checked","aria-colcount","aria-colindex","aria-colindextext","aria-colspan","aria-controls","aria-current","aria-describedby","aria-description","aria-details","aria-disabled","aria-dropeffect","aria-errormessage","aria-expanded","aria-flowto","aria-grabbed","aria-haspopup","aria-hidden","aria-invalid","aria-keyshortcuts","aria-label","aria-labelledby","aria-level","aria-live","aria-modal","aria-multiline","aria-multiselectable","aria-orientation","aria-owns","aria-placeholder","aria-posinset","aria-pressed","aria-readonly","aria-relevant","aria-required","aria-roledescription","aria-rowcount","aria-rowindex","aria-rowindextext","aria-rowspan","aria-selected","aria-setsize","aria-sort","aria-valuemax","aria-valuemin","aria-valuenow","aria-valuetext","autoCapitalize","autoComplete","autoCorrect","autoFocus","autoSave","capture","checked","children","className","color","content","contentEditable","contextMenu","dangerouslySetInnerHTML","datatype","defaultChecked","defaultValue","dir","disabled","draggable","enterKeyHint","exportparts","form","formAction","formEncType","formMethod","formNoValidate","formTarget","height","hidden","id","inert","inlist","inputMode","is","itemID","itemProp","itemRef","itemScope","itemType","lang","list","max","maxLength","min","minLength","multiple","name","nonce","onAbort","onAbortCapture","onAnimationEnd","onAnimationEndCapture","onAnimationIteration","onAnimationIterationCapture","onAnimationStart","onAnimationStartCapture","onAuxClick","onAuxClickCapture","onBeforeInput","onBeforeInputCapture","onBeforeToggle","onBlur","onBlurCapture","onCanPlay","onCanPlayCapture","onCanPlayThrough","onCanPlayThroughCapture","onChange","onChangeCapture","onClick","onClickCapture","onCompositionEnd","onCompositionEndCapture","onCompositionStart","onCompositionStartCapture","onCompositionUpdate","onCompositionUpdateCapture","onContextMenu","onContextMenuCapture","onCopy","onCopyCapture","onCut","onCutCapture","onDoubleClick","onDoubleClickCapture","onDrag","onDragCapture","onDragEnd","onDragEndCapture","onDragEnter","onDragEnterCapture","onDragExit","onDragExitCapture","onDragLeave","onDragLeaveCapture","onDragOver","onDragOverCapture","onDragStart","onDragStartCapture","onDrop","onDropCapture","onDurationChange","onDurationChangeCapture","onEmptied","onEmptiedCapture","onEncrypted","onEncryptedCapture","onEnded","onEndedCapture","onError","onErrorCapture","onFocus","onFocusCapture","onGotPointerCapture","onGotPointerCaptureCapture","onInput","onInputCapture","onInvalid","onInvalidCapture","onKeyDown","onKeyDownCapture","onKeyPress","onKeyPressCapture","onKeyUp","onKeyUpCapture","onLoad","onLoadCapture","onLoadStart","onLoadStartCapture","onLoadedData","onLoadedDataCapture","onLoadedMetadata","onLoadedMetadataCapture","onLostPointerCapture","onLostPointerCaptureCapture","onMouseDown","onMouseDownCapture","onMouseEnter","onMouseLeave","onMouseMove","onMouseMoveCapture","onMouseOut","onMouseOutCapture","onMouseOver","onMouseOverCapture","onMouseUp","onMouseUpCapture","onPaste","onPasteCapture","onPause","onPauseCapture","onPlay","onPlayCapture","onPlaying","onPlayingCapture","onPointerCancel","onPointerCancelCapture","onPointerDown","onPointerDownCapture","onPointerEnter","onPointerLeave","onPointerMove","onPointerMoveCapture","onPointerOut","onPointerOutCapture","onPointerOver","onPointerOverCapture","onPointerUp","onPointerUpCapture","onProgress","onProgressCapture","onRateChange","onRateChangeCapture","onReset","onResetCapture","onScroll","onScrollCapture","onScrollEnd","onScrollEndCapture","onSeeked","onSeekedCapture","onSeeking","onSeekingCapture","onSelect","onSelectCapture","onStalled","onStalledCapture","onSubmit","onSubmitCapture","onSuspend","onSuspendCapture","onTimeUpdate","onTimeUpdateCapture","onToggle","onTouchCancel","onTouchCancelCapture","onTouchEnd","onTouchEndCapture","onTouchMove","onTouchMoveCapture","onTouchStart","onTouchStartCapture","onTransitionCancel","onTransitionCancelCapture","onTransitionEnd","onTransitionEndCapture","onTransitionRun","onTransitionRunCapture","onTransitionStart","onTransitionStartCapture","onVolumeChange","onVolumeChangeCapture","onWaiting","onWaitingCapture","onWheel","onWheelCapture","part","pattern","placeholder","popover","popoverTarget","popoverTargetAction","prefix","property","radioGroup","readOnly","rel","required","resource","results","rev","role","security","size","slot","spellCheck","src","step","style","suppressContentEditableWarning","suppressHydrationWarning","tabIndex","title","translate","typeof","unselectable","value","vocab","width"],["key","ref"],["about","accept","accessKey","alt","aria-activedescendant","aria-atomic","aria-autocomplete","aria-braillelabel","aria-brailleroledescription","aria-busy","aria-checked","aria-colcount","aria-colindex","aria-colindextext","aria-colspan","aria-controls","aria-current","aria-describedby","aria-description","aria-details","aria-disabled","aria-dropeffect","aria-errormessage","aria-expanded","aria-flowto","aria-grabbed","aria-haspopup","aria-hidden","aria-invalid","aria-keyshortcuts","aria-label","aria-labelledby","aria-level","aria-live","aria-modal","aria-multiline","aria-multiselectable","aria-orientation","aria-owns","aria-placeholder","aria-posinset","aria-pressed","aria-readonly","aria-relevant","aria-required","aria-roledescription","aria-rowcount","aria-rowindex","aria-rowindextext","aria-rowspan","aria-selected","aria-setsize","aria-sort","aria-valuemax","aria-valuemin","aria-valuenow","aria-valuetext","autoCapitalize","autoComplete","autoCorrect","autoFocus","autoSave","capture","checked","children","className","color","content","contentEditable","contextMenu","dangerouslySetInnerHTML","datatype","defaultChecked","defaultValue","dir","disabled","draggable","enterKeyHint","exportparts","form","formAction","formEncType","formMethod","formNoValidate","formTarget","height","hidden","id","inert","inlist","inputMode","is","itemID","itemProp","itemRef","itemScope","itemType","key","lang","list","max","maxLength","min","minLength","multiple","name","nonce","onAbort","onAbortCapture","onAnimationEnd","onAnimationEndCapture","onAnimationIteration","onAnimationIterationCapture","onAnimationStart","onAnimationStartCapture","onAuxClick","onAuxClickCapture","onBeforeInput","onBeforeInputCapture","onBeforeToggle","onBlur","onBlurCapture","onCanPlay","onCanPlayCapture","onCanPlayThrough","onCanPlayThroughCapture","onChange","onChangeCapture","onClick","onClickCapture","onCompositionEnd","onCompositionEndCapture","onCompositionStart","onCompositionStartCapture","onCompositionUpdate","onCompositionUpdateCapture","onContextMenu","onContextMenuCapture","onCopy","onCopyCapture","onCut","onCutCapture","onDoubleClick","onDoubleClickCapture","onDrag","onDragCapture","onDragEnd","onDragEndCapture","onDragEnter","onDragEnterCapture","onDragExit","onDragExitCapture","onDragLeave","onDragLeaveCapture","onDragOver","onDragOverCapture","onDragStart","onDragStartCapture","onDrop","onDropCapture","onDurationChange","onDurationChangeCapture","onEmptied","onEmptiedCapture","onEncrypted","onEncryptedCapture","onEnded","onEndedCapture","onError","onErrorCapture","onFocus","onFocusCapture","onGotPointerCapture","onGotPointerCaptureCapture","onInput","onInputCapture","onInvalid","onInvalidCapture","onKeyDown","onKeyDownCapture","onKeyPress","onKeyPressCapture","onKeyUp","onKeyUpCapture","onLoad","onLoadCapture","onLoadStart","onLoadStartCapture","onLoadedData","onLoadedDataCapture","onLoadedMetadata","onLoadedMetadataCapture","onLostPointerCapture","onLostPointerCaptureCapture","onMouseDown","onMouseDownCapture","onMouseEnter","onMouseLeave","onMouseMove","onMouseMoveCapture","onMouseOut","onMouseOutCapture","onMouseOver","onMouseOverCapture","onMouseUp","onMouseUpCapture","onPaste","onPasteCapture","onPause","onPauseCapture","onPlay","onPlayCapture","onPlaying","onPlayingCapture","onPointerCancel","onPointerCancelCapture","onPointerDown","onPointerDownCapture","onPointerEnter","onPointerLeave","onPointerMove","onPointerMoveCapture","onPointerOut","onPointerOutCapture","onPointerOver","onPointerOverCapture","onPointerUp","onPointerUpCapture","onProgress","onProgressCapture","onRateChange","onRateChangeCapture","onReset","onResetCapture","onScroll","onScrollCapture","onScrollEnd","onScrollEndCapture","onSeeked","onSeekedCapture","onSeeking","onSeekingCapture","onSelect","onSelectCapture","onStalled","onStalledCapture","onSubmit","onSubmitCapture","onSuspend","onSuspendCapture","onTimeUpdate","onTimeUpdateCapture","onToggle","onTouchCancel","onTouchCancelCapture","onTouchEnd","onTouchEndCapture","onTouchMove","onTouchMoveCapture","onTouchStart","onTouchStartCapture","onTransitionCancel","onTransitionCancelCapture","onTransitionEnd","onTransitionEndCapture","onTransitionRun","onTransitionRunCapture","onTransitionStart","onTransitionStartCapture","onVolumeChange","onVolumeChangeCapture","onWaiting","onWaitingCapture","onWheel","onWheelCapture","part","pattern","placeholder","popover","popoverTarget","popoverTargetAction","property","radioGroup","readOnly","ref","rel","required","resource","results","rev","role","security","size","slot","spellCheck","src","step","style","suppressContentEditableWarning","suppressHydrationWarning","tabIndex","title","translate","type","typeof","unselectable","value","vocab","width"],["about","accept","accessKey","alt","aria-activedescendant","aria-atomic","aria-autocomplete","aria-braillelabel","aria-brailleroledescription","aria-busy","aria-checked","aria-colcount","aria-colindex","aria-colindextext","aria-colspan","aria-controls","aria-current","aria-describedby","aria-description","aria-details","aria-disabled","aria-dropeffect","aria-errormessage","aria-expanded","aria-flowto","aria-grabbed","aria-haspopup","aria-hidden","aria-invalid","aria-keyshortcuts","aria-label","aria-labelledby","aria-level","aria-live","aria-modal","aria-multiline","aria-multiselectable","aria-orientation","aria-owns","aria-placeholder","aria-posinset","aria-pressed","aria-readonly","aria-relevant","aria-required","aria-roledescription","aria-rowcount","aria-rowindex","aria-rowindextext","aria-rowspan","aria-selected","aria-setsize","aria-sort","aria-valuemax","aria-valuemin","aria-valuenow","aria-valuetext","autoCapitalize","autoComplete","autoCorrect","autoFocus","autoSave","capture","checked","children","className","color","content","contentEditable","contextMenu","dangerouslySetInnerHTML","datatype","defaultChecked","defaultValue","dir","disabled","draggable","enterKeyHint","exportparts","form","formAction","formEncType","formMethod","formNoValidate","formTarget","height","hidden","id","inert","inlist","inputMode","is","itemID","itemProp","itemRef","itemScope","itemType","key","lang","list","max","maxLength","min","minLength","multiple","name","nonce","onAbort","onAbortCapture","onAnimationEnd","onAnimationEndCapture","onAnimationIteration","onAnimationIterationCapture","onAnimationStart","onAnimationStartCapture","onAuxClick","onAuxClickCapture","onBeforeInput","onBeforeInputCapture","onBeforeToggle","onBlur","onBlurCapture","onCanPlay","onCanPlayCapture","onCanPlayThrough","onCanPlayThroughCapture","onChange","onChangeCapture","onClick","onClickCapture","onCompositionEnd","onCompositionEndCapture","onCompositionStart","onCompositionStartCapture","onCompositionUpdate","onCompositionUpdateCapture","onContextMenu","onContextMenuCapture","onCopy","onCopyCapture","onCut","onCutCapture","onDoubleClick","onDoubleClickCapture","onDrag","onDragCapture","onDragEnd","onDragEndCapture","onDragEnter","onDragEnterCapture","onDragExit","onDragExitCapture","onDragLeave","onDragLeaveCapture","onDragOver","onDragOverCapture","onDragStart","onDragStartCapture","onDrop","onDropCapture","onDurationChange","onDurationChangeCapture","onEmptied","onEmptiedCapture","onEncrypted","onEncryptedCapture","onEnded","onEndedCapture","onError","onErrorCapture","onFocus","onFocusCapture","onGotPointerCapture","onGotPointerCaptureCapture","onInput","onInputCapture","onInvalid","onInvalidCapture","onKeyDown","onKeyDownCapture","onKeyPress","onKeyPressCapture","onKeyUp","onKeyUpCapture","onLoad","onLoadCapture","onLoadStart","onLoadStartCapture","onLoadedData","onLoadedDataCapture","onLoadedMetadata","onLoadedMetadataCapture","onLostPointerCapture","onLostPointerCaptureCapture","onMouseDown","onMouseDownCapture","onMouseEnter","onMouseLeave","onMouseMove","onMouseMoveCapture","onMouseOut","onMouseOutCapture","onMouseOver","onMouseOverCapture","onMouseUp","onMouseUpCapture","onPaste","onPasteCapture","onPause","onPauseCapture","onPlay","onPlayCapture","onPlaying","onPlayingCapture","onPointerCancel","onPointerCancelCapture","onPointerDown","onPointerDownCapture","onPointerEnter","onPointerLeave","onPointerMove","onPointerMoveCapture","onPointerOut","onPointerOutCapture","onPointerOver","onPointerOverCapture","onPointerUp","onPointerUpCapture","onProgress","onProgressCapture","onRateChange","onRateChangeCapture","onReset","onResetCapture","onScroll","onScrollCapture","onScrollEnd","onScrollEndCapture","onSeeked","onSeekedCapture","onSeeking","onSeekingCapture","onSelect","onSelectCapture","onStalled","onStalledCapture","onSubmit","onSubmitCapture","onSuspend","onSuspendCapture","onTimeUpdate","onTimeUpdateCapture","onToggle","onTouchCancel","onTouchCancelCapture","onTouchEnd","onTouchEndCapture","onTouchMove","onTouchMoveCapture","onTouchStart","onTouchStartCapture","onTransitionCancel","onTransitionCancelCapture","onTransitionEnd","onTransitionEndCapture","onTransitionRun","onTransitionRunCapture","onTransitionStart","onTransitionStartCapture","onVolumeChange","onVolumeChangeCapture","onWaiting","onWaitingCapture","onWheel","onWheelCapture","part","pattern","placeholder","popover","popoverTarget","popoverTargetAction","prefix","property","radioGroup","readOnly","ref","rel","required","resource","results","rev","role","security","size","slot","spellCheck","src","step","style","suppressContentEditableWarning","suppressHydrationWarning","tabIndex","title","translate","typeof","unselectable","value","vocab","width"],["about","accessKey","aria-activedescendant","aria-atomic","aria-autocomplete","aria-braillelabel","aria-brailleroledescription","aria-busy","aria-checked","aria-colcount","aria-colindex","aria-colindextext","aria-colspan","aria-controls","aria-current","aria-describedby","aria-description","aria-details","aria-disabled","aria-dropeffect","aria-errormessage","aria-expanded","aria-flowto","aria-grabbed","aria-haspopup","aria-hidden","aria-invalid","aria-keyshortcuts","aria-label","aria-labelledby","aria-level","aria-live","aria-modal","aria-multiline","aria-multiselectable","aria-orientation","aria-owns","aria-placeholder","aria-posinset","aria-pressed","aria-readonly","aria-relevant","aria-required","aria-roledescription","aria-rowcount","aria-rowindex","aria-rowindextext","aria-rowspan","aria-selected","aria-setsize","aria-sort","aria-valuemax","aria-valuemin","aria-valuenow","aria-valuetext","autoCapitalize","autoComplete","autoCorrect","autoFocus","autoSave","children","className","color","content","contentEditable","contextMenu","dangerouslySetInnerHTML","datatype","defaultChecked","defaultValue","dir","disabled","draggable","enterKeyHint","exportparts","form","hidden","id","inert","inlist","inputMode","is","itemID","itemProp","itemRef","itemScope","itemType","lang","multiple","name","nonce","onAbort","onAbortCapture","onAnimationEnd","onAnimationEndCapture","onAnimationIteration","onAnimationIterationCapture","onAnimationStart","onAnimationStartCapture","onAuxClick","onAuxClickCapture","onBeforeInput","onBeforeInputCapture","onBeforeToggle","onBlur","onBlurCapture","onCanPlay","onCanPlayCapture","onCanPlayThrough","onCanPlayThroughCapture","onChange","onChangeCapture","onClick","onClickCapture","onCompositionEnd","onCompositionEndCapture","onCompositionStart","onCompositionStartCapture","onCompositionUpdate","onCompositionUpdateCapture","onContextMenu","onContextMenuCapture","onCopy","onCopyCapture","onCut","onCutCapture","onDoubleClick","onDoubleClickCapture","onDrag","onDragCapture","onDragEnd","onDragEndCapture","onDragEnter","onDragEnterCapture","onDragExit","onDragExitCapture","onDragLeave","onDragLeaveCapture","onDragOver","onDragOverCapture","onDragStart","onDragStartCapture","onDrop","onDropCapture","onDurationChange","onDurationChangeCapture","onEmptied","onEmptiedCapture","onEncrypted","onEncryptedCapture","onEnded","onEndedCapture","onError","onErrorCapture","onFocus","onFocusCapture","onGotPointerCapture","onGotPointerCaptureCapture","onInput","onInputCapture","onInvalid","onInvalidCapture","onKeyDown","onKeyDownCapture","onKeyPress","onKeyPressCapture","onKeyUp","onKeyUpCapture","onLoad","onLoadCapture","onLoadStart","onLoadStartCapture","onLoadedData","onLoadedDataCapture","onLoadedMetadata","onLoadedMetadataCapture","onLostPointerCapture","onLostPointerCaptureCapture","onMouseDown","onMouseDownCapture","onMouseEnter","onMouseLeave","onMouseMove","onMouseMoveCapture","onMouseOut","onMouseOutCapture","onMouseOver","onMouseOverCapture","onMouseUp","onMouseUpCapture","onPaste","onPasteCapture","onPause","onPauseCapture","onPlay","onPlayCapture","onPlaying","onPlayingCapture","onPointerCancel","onPointerCancelCapture","onPointerDown","onPointerDownCapture","onPointerEnter","onPointerLeave","onPointerMove","onPointerMoveCapture","onPointerOut","onPointerOutCapture","onPointerOver","onPointerOverCapture","onPointerUp","onPointerUpCapture","onProgress","onProgressCapture","onRateChange","onRateChangeCapture","onReset","onResetCapture","onScroll","onScrollCapture","onScrollEnd","onScrollEndCapture","onSeeked","onSeekedCapture","onSeeking","onSeekingCapture","onSelect","onSelectCapture","onStalled","onStalledCapture","onSubmit","onSubmitCapture","onSuspend","onSuspendCapture","onTimeUpdate","onTimeUpdateCapture","onToggle","onTouchCancel","onTouchCancelCapture","onTouchEnd","onTouchEndCapture","onTouchMove","onTouchMoveCapture","onTouchStart","onTouchStartCapture","onTransitionCancel","onTransitionCancelCapture","onTransitionEnd","onTransitionEndCapture","onTransitionRun","onTransitionRunCapture","onTransitionStart","onTransitionStartCapture","onVolumeChange","onVolumeChangeCapture","onWaiting","onWaitingCapture","onWheel","onWheelCapture","part","popover","popoverTarget","popoverTargetAction","prefix","property","radioGroup","rel","required","resource","results","rev","role","security","size","slot","spellCheck","style","suppressContentEditableWarning","suppressHydrationWarning","tabIndex","title","translate","typeof","unselectable","value","vocab"],["about","accept","accessKey","alt","aria-activedescendant","aria-atomic","aria-autocomplete","aria-braillelabel","aria-brailleroledescription","aria-busy","aria-checked","aria-colcount","aria-colindex","aria-colindextext","aria-colspan","aria-controls","aria-current","aria-describedby","aria-description","aria-details","aria-disabled","aria-dropeffect","aria-errormessage","aria-expanded","aria-flowto","aria-grabbed","aria-haspopup","aria-hidden","aria-invalid","aria-keyshortcuts","aria-label","aria-labelledby","aria-level","aria-live","aria-modal","aria-multiline","aria-multiselectable","aria-orientation","aria-owns","aria-placeholder","aria-posinset","aria-pressed","aria-readonly","aria-relevant","aria-required","aria-roledescription","aria-rowcount","aria-rowindex","aria-rowindextext","aria-rowspan","aria-selected","aria-setsize","aria-sort","aria-valuemax","aria-valuemin","aria-valuenow","aria-valuetext","autoCapitalize","autoComplete","autoCorrect","autoFocus","autoSave","capture","checked","children","className","color","content","contentEditable","contextMenu","dangerouslySetInnerHTML","datatype","defaultChecked","defaultValue","dir","disabled","draggable","enterKeyHint","exportparts","form","formAction","formEncType","formMethod","formNoValidate","formTarget","height","hidden","id","inert","inlist","inputMode","is","itemID","itemProp","itemRef","itemScope","itemType","lang","list","max","maxLength","min","minLength","multiple","name","nonce","onAbort","onAbortCapture","onAnimationEnd","onAnimationEndCapture","onAnimationIteration","onAnimationIterationCapture","onAnimationStart","onAnimationStartCapture","onAuxClick","onAuxClickCapture","onBeforeInput","onBeforeInputCapture","onBeforeToggle","onBlur","onBlurCapture","onCanPlay","onCanPlayCapture","onCanPlayThrough","onCanPlayThroughCapture","onChange","onChangeCapture","onClick","onClickCapture","onCompositionEnd","onCompositionEndCapture","onCompositionStart","onCompositionStartCapture","onCompositionUpdate","onCompositionUpdateCapture","onContextMenu","onContextMenuCapture","onCopy","onCopyCapture","onCut","onCutCapture","onDoubleClick","onDoubleClickCapture","onDrag","onDragCapture","onDragEnd","onDragEndCapture","onDragEnter","onDragEnterCapture","onDragExit","onDragExitCapture","onDragLeave","onDragLeaveCapture","onDragOver","onDragOverCapture","onDragStart","onDragStartCapture","onDrop","onDropCapture","onDurationChange","onDurationChangeCapture","onEmptied","onEmptiedCapture","onEncrypted","onEncryptedCapture","onEnded","onEndedCapture","onError","onErrorCapture","onFocus","onFocusCapture","onGotPointerCapture","onGotPointerCaptureCapture","onInput","onInputCapture","onInvalid","onInvalidCapture","onKeyDown","onKeyDownCapture","onKeyPress","onKeyPressCapture","onKeyUp","onKeyUpCapture","onLoad","onLoadCapture","onLoadStart","onLoadStartCapture","onLoadedData","onLoadedDataCapture","onLoadedMetadata","onLoadedMetadataCapture","onLostPointerCapture","onLostPointerCaptureCapture","onMouseDown","onMouseDownCapture","onMouseEnter","onMouseLeave","onMouseMove","onMouseMoveCapture","onMouseOut","onMouseOutCapture","onMouseOver","onMouseOverCapture","onMouseUp","onMouseUpCapture","onPaste","onPasteCapture","onPause","onPauseCapture","onPlay","onPlayCapture","onPlaying","onPlayingCapture","onPointerCancel","onPointerCancelCapture","onPointerDown","onPointerDownCapture","onPointerEnter","onPointerLeave","onPointerMove","onPointerMoveCapture","onPointerOut","onPointerOutCapture","onPointerOver","onPointerOverCapture","onPointerUp","onPointerUpCapture","onProgress","onProgressCapture","onRateChange","onRateChangeCapture","onReset","onResetCapture","onScroll","onScrollCapture","onScrollEnd","onScrollEndCapture","onSeeked","onSeekedCapture","onSeeking","onSeekingCapture","onSelect","onSelectCapture","onStalled","onStalledCapture","onSubmit","onSubmitCapture","onSuspend","onSuspendCapture","onTimeUpdate","onTimeUpdateCapture","onToggle","onTouchCancel","onTouchCancelCapture","onTouchEnd","onTouchEndCapture","onTouchMove","onTouchMoveCapture","onTouchStart","onTouchStartCapture","onTransitionCancel","onTransitionCancelCapture","onTransitionEnd","onTransitionEndCapture","onTransitionRun","onTransitionRunCapture","onTransitionStart","onTransitionStartCapture","onVolumeChange","onVolumeChangeCapture","onWaiting","onWaitingCapture","onWheel","onWheelCapture","part","pattern","placeholder","popover","popoverTarget","popoverTargetAction","prefix","property","radioGroup","readOnly","rel","required","resource","results","rev","security","size","slot","spellCheck","src","step","style","suppressContentEditableWarning","suppressHydrationWarning","tabIndex","title","translate","typeof","unselectable","value","vocab","width"],["about","accessKey","aria-activedescendant","aria-atomic","aria-autocomplete","aria-braillelabel","aria-brailleroledescription","aria-busy","aria-checked","aria-colcount","aria-colindex","aria-colindextext","aria-colspan","aria-controls","aria-current","aria-describedby","aria-description","aria-details","aria-disabled","aria-dropeffect","aria-errormessage","aria-expanded","aria-flowto","aria-grabbed","aria-haspopup","aria-hidden","aria-invalid","aria-keyshortcuts","aria-label","aria-labelledby","aria-level","aria-live","aria-modal","aria-multiline","aria-multiselectable","aria-orientation","aria-owns","aria-placeholder","aria-posinset","aria-pressed","aria-readonly","aria-relevant","aria-required","aria-roledescription","aria-rowcount","aria-rowindex","aria-rowindextext","aria-rowspan","aria-selected","aria-setsize","aria-sort","aria-valuemax","aria-valuemin","aria-valuenow","aria-valuetext","autoCapitalize","autoComplete","autoCorrect","autoFocus","autoSave","children","className","color","cols","content","contentEditable","contextMenu","dangerouslySetInnerHTML","datatype","defaultChecked","defaultValue","dir","dirName","disabled","draggable","enterKeyHint","exportparts","form","hidden","id","inert","inlist","inputMode","is","itemID","itemProp","itemRef","itemScope","itemType","lang","maxLength","minLength","name","nonce","onAbort","onAbortCapture","onAnimationEnd","onAnimationEndCapture","onAnimationIteration","onAnimationIterationCapture","onAnimationStart","onAnimationStartCapture","onAuxClick","onAuxClickCapture","onBeforeInput","onBeforeInputCapture","onBeforeToggle","onBlur","onBlurCapture","onCanPlay","onCanPlayCapture","onCanPlayThrough","onCanPlayThroughCapture","onChange","onChangeCapture","onClick","onClickCapture","onCompositionEnd","onCompositionEndCapture","onCompositionStart","onCompositionStartCapture","onCompositionUpdate","onCompositionUpdateCapture","onContextMenu","onContextMenuCapture","onCopy","onCopyCapture","onCut","onCutCapture","onDoubleClick","onDoubleClickCapture","onDrag","onDragCapture","onDragEnd","onDragEndCapture","onDragEnter","onDragEnterCapture","onDragExit","onDragExitCapture","onDragLeave","onDragLeaveCapture","onDragOver","onDragOverCapture","onDragStart","onDragStartCapture","onDrop","onDropCapture","onDurationChange","onDurationChangeCapture","onEmptied","onEmptiedCapture","onEncrypted","onEncryptedCapture","onEnded","onEndedCapture","onError","onErrorCapture","onFocus","onFocusCapture","onGotPointerCapture","onGotPointerCaptureCapture","onInput","onInputCapture","onInvalid","onInvalidCapture","onKeyDown","onKeyDownCapture","onKeyPress","onKeyPressCapture","onKeyUp","onKeyUpCapture","onLoad","onLoadCapture","onLoadStart","onLoadStartCapture","onLoadedData","onLoadedDataCapture","onLoadedMetadata","onLoadedMetadataCapture","onLostPointerCapture","onLostPointerCaptureCapture","onMouseDown","onMouseDownCapture","onMouseEnter","onMouseLeave","onMouseMove","onMouseMoveCapture","onMouseOut","onMouseOutCapture","onMouseOver","onMouseOverCapture","onMouseUp","onMouseUpCapture","onPaste","onPasteCapture","onPause","onPauseCapture","onPlay","onPlayCapture","onPlaying","onPlayingCapture","onPointerCancel","onPointerCancelCapture","onPointerDown","onPointerDownCapture","onPointerEnter","onPointerLeave","onPointerMove","onPointerMoveCapture","onPointerOut","onPointerOutCapture","onPointerOver","onPointerOverCapture","onPointerUp","onPointerUpCapture","onProgress","onProgressCapture","onRateChange","onRateChangeCapture","onReset","onResetCapture","onScroll","onScrollCapture","onScrollEnd","onScrollEndCapture","onSeeked","onSeekedCapture","onSeeking","onSeekingCapture","onSelect","onSelectCapture","onStalled","onStalledCapture","onSubmit","onSubmitCapture","onSuspend","onSuspendCapture","onTimeUpdate","onTimeUpdateCapture","onToggle","onTouchCancel","onTouchCancelCapture","onTouchEnd","onTouchEndCapture","onTouchMove","onTouchMoveCapture","onTouchStart","onTouchStartCapture","onTransitionCancel","onTransitionCancelCapture","onTransitionEnd","onTransitionEndCapture","onTransitionRun","onTransitionRunCapture","onTransitionStart","onTransitionStartCapture","onVolumeChange","onVolumeChangeCapture","onWaiting","onWaitingCapture","onWheel","onWheelCapture","part","placeholder","popover","popoverTarget","popoverTargetAction","prefix","property","radioGroup","readOnly","rel","required","resource","results","rev","role","rows","security","slot","spellCheck","style","suppressContentEditableWarning","suppressHydrationWarning","tabIndex","title","translate","typeof","unselectable","value","vocab","wrap"]],"classes":["m-action-panel","m-action-panel-action","m-action-panel-text","m-action-panel-title","m-actions","m-activity","m-activity-actor","m-activity-body","m-activity-dot","m-api-description","m-api-endpoint","m-api-examples","m-api-params-title","m-api-route","m-api-text","m-api-title","m-app-aside","m-app-columns","m-app-header","m-app-main","m-app-shell","m-attachment-icon","m-attachment-name","m-attachment-size","m-attachment-text","m-attachments","m-auth","m-auth-aside","m-auth-body","m-auth-footer","m-auth-header","m-auth-main","m-auth-panel","m-auth-title","m-avatar","m-avatar-group","m-avatar-lg","m-avatar-more","m-avatar-placeholder","m-avatar-sm","m-avatar-status","m-avatar-xl","m-avatar-xs","m-backdrop","m-badge","m-banner","m-bento","m-bento-visual","m-brand","m-brand-lockup","m-brand-tagline","m-breadcrumbs","m-button","m-button-accent","m-button-danger","m-button-ghost","m-button-group","m-button-group-icon","m-button-icon","m-button-primary","m-button-secondary","m-calendar","m-calendar-agenda","m-calendar-agenda-list","m-calendar-agenda-text","m-calendar-agenda-title","m-calendar-allday","m-calendar-column","m-calendar-column-heading","m-calendar-column-label","m-calendar-columns","m-calendar-dot","m-calendar-event","m-calendar-event-time","m-calendar-events","m-calendar-header","m-calendar-hours","m-calendar-main","m-calendar-month","m-calendar-month-title","m-calendar-more","m-calendar-nav","m-calendar-none","m-calendar-slots","m-calendar-timegrid","m-calendar-title","m-calendar-year","m-callout","m-card","m-card-actions","m-card-body","m-card-footer","m-card-header","m-card-heading","m-card-title","m-cart","m-cart-controls","m-cart-empty","m-cart-info","m-cart-item-title","m-cart-layout","m-cart-related","m-cart-related-title","m-cart-remove","m-cart-stock","m-cart-summary","m-chat-avatar","m-chat-bubble","m-chat-composer","m-chat-log","m-chat-preview","m-chat-send","m-chat-suggestions","m-chat-typing","m-check-list","m-chip","m-choice","m-choice-check","m-choice-control","m-choice-described","m-choice-leading","m-choice-option","m-choice-options","m-choice-text","m-choice-value","m-code-bar","m-code-block","m-code-cell","m-code-cells","m-code-control","m-code-copy","m-code-input","m-code-line","m-code-number","m-code-prompt","m-code-tabs","m-combobox","m-combobox-options","m-combobox-toggle","m-comparison","m-comparison-group","m-comparison-no","m-composer","m-composer-actions","m-composer-avatar","m-composer-bar","m-composer-box","m-composer-count","m-composer-empty","m-composer-label","m-composer-main","m-composer-preview","m-confirm","m-confirm-actions","m-confirm-body","m-contact","m-contact-body","m-contact-form","m-contact-media","m-contact-offices","m-container","m-content-copy","m-content-media","m-content-quote","m-content-section","m-content-stats","m-cover-background","m-cta","m-cta-copy","m-cta-media","m-data-table","m-description-action","m-description-heading","m-description-list","m-description-title","m-dialog","m-dialog-heading","m-dialog-panel","m-dialog-position","m-divider","m-docs-body","m-docs-header","m-docs-nav","m-docs-sections","m-docs-shell","m-docs-toc","m-docs-toc-footer","m-docs-version","m-emphasis","m-empty","m-empty-extra","m-empty-icon","m-error","m-error-summary","m-error-summary-title","m-eyebrow","m-faq","m-faq-grid","m-feature-details","m-feature-grid","m-feature-icon","m-feature-preview","m-feature-section","m-field","m-fieldset","m-fieldset-fields","m-file-caret","m-file-row","m-file-tree","m-filter-active","m-filter-chips","m-filter-clear","m-filter-count","m-filters","m-flyout","m-flyout-footer","m-flyout-icon","m-flyout-panel","m-flyout-text","m-flyout-trigger","m-footer","m-footer-bottom","m-footer-center","m-footer-grid","m-footer-inline","m-footer-newsletter","m-grid-list","m-grid-list-actions","m-grid-list-body","m-grid-list-cover","m-grid-list-details","m-grid-list-media","m-grid-list-meta","m-grid-list-text","m-grid-list-title","m-header-context","m-header-links","m-header-section","m-header-stats","m-heading-avatar","m-heading-main","m-heading-meta","m-heading-row","m-hero","m-hero-angled","m-hero-background","m-hero-center","m-hero-description","m-hero-note","m-hero-preview","m-hero-split","m-hero-tiles","m-icon-links","m-input-action","m-input-group","m-input-icon","m-kbd","m-kbd-group","m-layout-stack","m-link-cards","m-logo","m-logo-cloud","m-logo-cloud-copy","m-mark","m-marketing-header","m-marketing-main","m-marketing-page","m-marketing-panel","m-marketing-panel-nav","m-marketing-section","m-media-object","m-media-object-body","m-media-object-media","m-media-object-title","m-menu","m-menu-header","m-menu-heading","m-menu-icon","m-menu-separator","m-menu-text","m-menu-trigger","m-metric-change","m-metric-icon","m-metric-previous","m-metrics","m-mobile-sidebar","m-mock-address","m-mock-bar","m-mock-body","m-mock-dots","m-mock-window","m-nav-children","m-nav-count","m-nav-group","m-nav-group-title","m-nav-icon","m-nav-marker","m-navbar","m-navbar-toggle","m-network","m-network-label","m-network-link","m-network-node","m-network-signal","m-network-toggle","m-newsletter","m-newsletter-status","m-not-found","m-not-found-art","m-notice","m-notice-actions","m-notice-dismiss","m-order","m-order-action","m-order-actions","m-order-header","m-order-hint","m-order-history","m-order-item-actions","m-order-item-name","m-order-items","m-order-progress","m-order-status","m-order-summary","m-order-summary-title","m-order-title","m-order-total","m-page-feedback","m-page-heading","m-page-title","m-pager","m-pagination","m-pagination-gap","m-pagination-pages","m-palette","m-palette-attribution","m-palette-empty","m-palette-footer","m-palette-group","m-palette-icon","m-palette-input","m-palette-item","m-palette-meta","m-palette-position","m-palette-results","m-param-list","m-password-meter","m-password-requirements","m-password-strength","m-password-toggle","m-placeholder","m-post-image","m-post-list","m-post-meta","m-post-title","m-preview-frame","m-price","m-pricing","m-pricing-detail","m-pricing-extra","m-pricing-features-label","m-pricing-grid","m-pricing-offer","m-process-number","m-process-steps","m-product-badge","m-product-card-action","m-product-description","m-product-details","m-product-form","m-product-gallery","m-product-highlights","m-product-image","m-product-info","m-product-list","m-product-meta","m-product-name","m-product-option","m-product-overlay","m-product-overview","m-product-price","m-product-summary","m-product-swatches","m-product-thumbs","m-progress","m-progress-label","m-progress-step-description","m-progress-step-marker","m-progress-step-name","m-progress-step-number","m-progress-step-text","m-progress-steps","m-progress-track","m-prose","m-provider-buttons","m-quick-view","m-radio-card","m-radio-group","m-rating","m-release","m-release-type","m-release-version","m-required","m-review","m-review-avatar","m-review-body","m-review-list","m-review-meta","m-review-title","m-reviews","m-reviews-distribution","m-reviews-summary","m-reviews-title","m-row-link","m-save-bar","m-search-trigger","m-section","m-section-body","m-section-description","m-section-heading","m-section-heading-row","m-section-heading-tabs","m-section-heading-text","m-section-heading-title","m-section-title","m-segmented","m-select-control","m-settings-section","m-settings-title","m-sidebar","m-sidebar-panel","m-sign-in","m-sign-in-aside","m-sign-in-split","m-sign-in-title","m-skip","m-slide-over","m-slide-over-body","m-sort-button","m-spinner","m-sr-only","m-stack","m-stacked-action","m-stacked-chevron","m-stacked-group","m-stacked-group-heading","m-stacked-header","m-stacked-list","m-stacked-meta","m-stacked-shell","m-stacked-text","m-stacked-title","m-stars","m-stat-band","m-stat-description","m-stat-group","m-step-description","m-step-number","m-steps","m-swatch","m-switch","m-tab-count","m-tab-icon","m-tab-nav","m-table","m-table-footer","m-table-group","m-table-scroll","m-table-select-col","m-table-state","m-table-toolbar","m-tabs","m-team-bio","m-team-grid","m-team-portrait","m-testimonial","m-testimonial-avatar","m-testimonial-grid","m-testimonial-logo","m-testimonial-person","m-text","m-theme-scope","m-toast","m-toast-icon","m-toast-leading","m-toaster","m-truncate","m-user","m-workspace"],"sourceHashes":{"b9b0203ae3d8f485ae15651d4b658d6e8cb283fd4ef435ff20908d6ff31d4a9a":"src/application.css","4679dae34d7909fca950ab33de5b6bc4d89b936cee917b2be3abc66aff99c91d":"src/application.tsx","73d20dd789ccebbea621f9ae3ff3294ddde949c4b99801faa74c159c36238a42":"src/auth.tsx","d283e2ccf0720ba91d186abeb40c85cf8aa362e13cf0f0d689f8f42465af01f6":"src/brand.ts","7df063c61129c6b9ca8e2bef71d19c291e962e8652039d49e740b68ae06872ee":"src/calendar.css","a2fd58e5617bd7a8f1a6fe2ab66f1757bf06e2ca0cb444a7b64cca2b2203dfcb":"src/calendar.tsx","097d48e77f9cd59fe232be784f5852b6b17aa6656e1c0bf439e6fe879b61f54c":"src/choice.tsx","93bc2268e4b28a4aa5cee0e5ffbc22f2810d867205eadc83d532f3e9ba916e13":"src/composer.tsx","223cdb03100e87b85b896e69f222a4bec8dfe36105d7b8ad355fe849d1e733a2":"src/data.css","fe37e3674cee3441b9696121857c4e9150102360d46d08fc8ea019a800c1cf3b":"src/display.tsx","6f61f8ae4bdde7969d6124601b784b905fd54799366f3978d4ae55862aea2408":"src/docs.css","28c32fdba8795c2f53ca3ad977ef9ffe68b3bfa215f150c481f0d9258b31d1aa":"src/docs.tsx","d7e92ff54b56556b49ce75d0b99931f0610da80114b157fb47f1f5a7ff73a4b9":"src/ecommerce.css","45845ac5581a7417b6d211a1efa4206c2d41ad096a9bcb3cf09725f725163906":"src/ecommerce.tsx","d0bad679e37833206557957c1a214455280bf7d3d5361f7274e5120387f72b15":"src/feedback.tsx","8f627af14aa05076bc043398ad4c86f795c52ce6e5f36811492d24447ca5fc4b":"src/foundation.css","a596614062e448c702249dcf72a833bd71f38381f1ad987d1a1d364af52444a1":"src/foundation.tsx","df931d5df89ccf7fe48cc1c566f14fc6feef78a96a31d45f12b771612a08f09f":"src/heading.ts","c95bfd472c58d9dc950aaf0f10f44f87507d26530e5602980dd2cb63f80b41e0":"src/icons.tsx","5caed2388a5f528f59eb32d06472c8c536ce05c5f281b1d8c32a489c7d671d6f":"src/illustration.tsx","da6c7ac7eff80561118028fc1257874d1daea8d5a26b7e211b692b1b0d4cf6fd":"src/index.ts","43583b3a0405c9bd81c76649fca8b63d460ea2c87d3fb60eecfee1bbe180e2e8":"src/inspection.tsx","ce0bf57cf52cb8323c12aba754bb35d92174a325d85785e0c3db19ace5372a7e":"src/internal.tsx","daaf5eb0108d270f2e843645baf4cc1f1636f2f3e39de760424616e8b5a3845b":"src/layout.tsx","4131f911f35202e88244d263dd3de88a03f141e6cad73ac66785078c18c2ca2e":"src/marketing-sections.tsx","04bf529efefd6f59fd5258683a010d338b0bf042a95aa2df82535aa31de0eb0e":"src/marketing.css","0b82a7070a929a0398465e9cba9b787c117ed2d05876d9adc315809e844f6a01":"src/marketing.tsx","07b646fa1f37b54d5ff8eccbcc8c572a4b5273cb72e0f4739b0b5f8b8eef3150":"src/navigation.tsx","2b68538d7ac86d5908629095212467757d9e3308cd7aabeee6f341b3a1650559":"src/overlays.css","7988fcef146b13d54efee2473e96129dc9acf378aec27244405a0b01001da1f5":"src/primitives.tsx","05e50c773c0df97c9643cea3976bdf192f4a67700fbc54fa5eb0fe621efe587d":"src/showcase.tsx","99426a51385eff27f3084a7b9f9622512d2c799c6a51e54fe029c1952325231c":"src/tokens.css","f40c2837f9684ef9b165842b5e134cd91780a38ef2821261451901dc0b4a6890":"src/workspace.tsx"}}
1
+ {"schemaVersion":1,"version":"0.13.0","taxonomy":{"kits":[{"id":"foundation","title":"Foundation","description":"Controls, elements and layout primitives every Mortar screen is built from.","categories":[{"id":"actions","title":"Actions and navigation","thumbnail":"ButtonGroup","components":["Button","ButtonGroup","ActionLink","Dropdown","Tabs"]},{"id":"forms","title":"Form controls","thumbnail":"Input","components":["Input","TextArea","Select","Listbox","Combobox","Fieldset","Checkbox","RadioGroup","Switch","SegmentedControl","FilterChip","ErrorSummary"]},{"id":"layout","title":"Layout","thumbnail":"Card","components":["Card","Divider","MediaObject","Stack","Container","Text"]},{"id":"elements","title":"Elements","thumbnail":"Badge","components":["Avatar","AvatarGroup","Badge","Kbd","ProgressBar","CheckList"]},{"id":"feedback","title":"Feedback and overlays","thumbnail":"Notice","components":["Notice","EmptyState","Toast","Toaster","Modal"]},{"id":"theming","title":"Theming","thumbnail":null,"components":["ThemeProvider","AppearanceControl"]}]},{"id":"application","title":"Application UI","description":"Shells, data display, lists and overlays for product screens.","categories":[{"id":"shells","title":"Shells and headings","thumbnail":"PageHeading","components":["AppShell","StackedShell","PageHeading","SectionHeading"]},{"id":"navigation","title":"Navigation","thumbnail":"Navbar","components":["Navbar","Sidebar","Breadcrumbs","TabNav","ProgressSteps","Pagination"]},{"id":"lists","title":"Lists and tables","thumbnail":"StackedList","components":["DataTable","Table","GridList","StackedList","ActivityFeed"]},{"id":"data","title":"Data display","thumbnail":"MetricGroup","components":["DescriptionList","AttachmentList","Calendar","MetricGroup","CodeBlock","PreviewFrame"]},{"id":"forms","title":"Forms and settings","thumbnail":"SettingsSection","components":["SettingsSection","SaveBar","ActionPanel","CommentComposer"]},{"id":"auth","title":"Sign-in and registration","thumbnail":"SignInPanel","components":["AuthLayout","SignInPanel","ProviderButtons","PasswordInput","CodeInput"]},{"id":"overlays","title":"Overlays","thumbnail":null,"components":["SlideOver","ConfirmDialog","CommandPalette"]}]},{"id":"marketing","title":"Marketing UI","description":"Page sections for landing, pricing and company pages.","categories":[{"id":"sections","title":"Page sections","thumbnail":"Hero","components":["Hero","HeaderSection","FeatureGrid","FeatureSection","BentoGrid","ProcessSteps","CallToAction","Section"]},{"id":"social-proof","title":"Social proof","thumbnail":"StatGroup","components":["Testimonial","TestimonialGrid","LogoCloud","StatGroup","TeamGrid"]},{"id":"pricing","title":"Pricing","thumbnail":"Pricing","components":["Pricing","PlanComparison","FAQ"]},{"id":"chrome","title":"Headers, footers and forms","thumbnail":"Newsletter","components":["Banner","MarketingHeader","Footer","MarketingPage","Newsletter","ContactSection","NotFound"]},{"id":"showcase","title":"Content and showcase","thumbnail":"ChatPreview","components":["ContentSection","PostList","MockWindow","NetworkIllustration","ChatPreview"]}]},{"id":"docs","title":"Documentation","description":"A docs shell with search, navigation and rich content blocks.","categories":[{"id":"navigation","title":"Shell and navigation","thumbnail":"LinkCards","components":["DocsShell","SearchTrigger","SearchDialog","PagerLinks","LinkCards"]},{"id":"content","title":"Content","thumbnail":"Callout","components":["Prose","Callout","Steps","CodeTabs","FileTree","ApiEndpoint","Release","PageFeedback"]}]},{"id":"ecommerce","title":"Ecommerce","description":"Product lists, product pages, carts and order summaries for storefronts.","categories":[{"id":"products","title":"Products","thumbnail":"ProductList","components":["ProductList","ProductOverview","ProductQuickView","ProductFilters","ProductReviews"]},{"id":"checkout","title":"Cart and checkout","thumbnail":"OrderSummary","components":["ShoppingCart","OrderSummary","OrderHistory"]}]}]},"templates":[{"id":"saas-landing","title":"Landing page","description":"Hero, features, pricing and sign-up for a SaaS product.","kind":"Marketing","components":["AppearanceControl","Badge","CallToAction","ChatPreview","CheckList","CodeBlock","FeatureGrid","FeatureSection","Footer","Hero","LogoCloud","MarketingHeader","MockWindow","Pricing","ProcessSteps","Section","SignInPanel","Stack","StackedList","Text"]},{"id":"split-landing","title":"Landing page, split","description":"One-screen landing with a split hero, an illustration and a compact footer.","kind":"Marketing","components":["AppearanceControl","Footer","Hero","MarketingHeader","MarketingPage","NetworkIllustration","Notice"]},{"id":"pricing","title":"Pricing page","description":"Plans, comparison table, questions and a call to action.","kind":"Marketing","components":["AppearanceControl","CallToAction","FAQ","Footer","HeaderSection","MarketingHeader","PlanComparison","Pricing"]},{"id":"about","title":"About page","description":"Story, team, stats and customers.","kind":"Marketing","components":["AppearanceControl","CallToAction","ContentSection","Footer","HeaderSection","LogoCloud","MarketingHeader","MockWindow","StatGroup","TeamGrid"]},{"id":"project-workspace","title":"Project workspace","description":"Multi-column app screen with a schedule and activity.","kind":"Application","components":["ActivityFeed","AppShell","Avatar","Badge","Button","Calendar","DescriptionList","GridList","PageHeading","SectionHeading","Stack"]},{"id":"stacked-dashboard","title":"Dashboard, top navigation","description":"Top bar with a dropdown group, page tabs and a centred column.","kind":"Application","components":["AppearanceControl","Avatar","MetricGroup","PageHeading","StackedList","StackedShell"]},{"id":"settings","title":"Settings screen","description":"Tabs, grouped fields, a danger zone and unsaved changes.","kind":"Application","components":["ActionLink","ActionPanel","AppShell","Button","Combobox","DescriptionList","Fieldset","Input","PageHeading","SaveBar","SettingsSection","Stack","Switch","Tabs"]},{"id":"sign-in","title":"Sign in","description":"Email and password, remember me, a reset link and providers.","kind":"Application","components":["AuthLayout","Button","Checkbox","Divider","Input","Notice","PasswordInput","ProviderButtons","Stack"]},{"id":"sign-in-split","title":"Sign in, split screen","description":"The same sign-in beside a customer quote.","kind":"Application","components":["AuthLayout","Button","Checkbox","Divider","Input","Notice","PasswordInput","ProviderButtons","Stack","Testimonial"]},{"id":"sign-up","title":"Sign up","description":"Name, email, a new password with its rules, terms and providers.","kind":"Application","components":["AuthLayout","Button","Checkbox","Divider","Input","Notice","PasswordInput","ProviderButtons"]},{"id":"forgot-password","title":"Forgot password","description":"Request a reset link without revealing whether an account exists.","kind":"Application","components":["AuthLayout","Button","Input","Notice"]},{"id":"check-email","title":"Check your email","description":"What happens after a link is sent, with a rate-limited resend.","kind":"Application","components":["AuthLayout","Button","Stack","Text"]},{"id":"reset-password","title":"Reset password","description":"A new password, confirmed, with its requirements up front.","kind":"Application","components":["AuthLayout","Button","Notice","PasswordInput"]},{"id":"verify-email","title":"Verify email","description":"A one-time code, resend countdown and a change-email link.","kind":"Application","components":["AuthLayout","Button","CodeInput","Notice","Stack","Text"]},{"id":"two-factor","title":"Two-factor sign-in","description":"An authenticator code with a recovery-code fallback.","kind":"Application","components":["AuthLayout","Button","CodeInput","Notice"]},{"id":"product-page","title":"Product page","description":"Gallery, options, add to bag and related products.","kind":"Ecommerce","components":["Breadcrumbs","Container","Footer","MarketingHeader","ProductList","ProductOverview","ProductReviews","SectionHeading","Stack"]},{"id":"cart-page","title":"Shopping bag","description":"Editable bag lines beside the order summary.","kind":"Ecommerce","components":["ActionLink","Button","Container","Footer","MarketingHeader","OrderSummary","PageHeading","ShoppingCart","Stack"]},{"id":"category-page","title":"Category page","description":"Category previews, filters, products and incentives.","kind":"Ecommerce","components":["Container","EmptyState","FeatureGrid","Footer","GridList","MarketingHeader","PageHeading","ProductFilters","ProductList","SectionHeading","Stack"]},{"id":"checkout-page","title":"Checkout","description":"Contact, shipping, delivery and payment with a live total.","kind":"Ecommerce","components":["Button","Container","Fieldset","Footer","Input","MarketingHeader","OrderSummary","PageHeading","RadioGroup","Stack","StackedList"]},{"id":"order-history","title":"Order history","description":"Past orders with status and items.","kind":"Ecommerce","components":["Container","Footer","MarketingHeader","OrderHistory","PageHeading","Stack"]}],"exports":{"values":["ActionLink","ActionPanel","ActivityFeed","ApiEndpoint","AppShell","AppearanceControl","AttachmentList","AuthLayout","Avatar","AvatarGroup","Badge","Banner","BentoGrid","Breadcrumbs","Button","ButtonGroup","Calendar","CallToAction","Callout","Card","ChatPreview","CheckList","Checkbox","CodeBlock","CodeInput","CodeTabs","Combobox","CommandPalette","CommentComposer","ConfirmDialog","ContactSection","Container","ContentSection","DataTable","DescriptionList","Divider","DocsShell","Dropdown","EmptyState","ErrorSummary","FAQ","FeatureGrid","FeatureSection","Fieldset","FileTree","FilterChip","Footer","GridList","HeaderSection","Hero","Input","Kbd","LinkCards","Listbox","LogoCloud","MarketingHeader","MarketingPage","MediaObject","MetricGroup","MockWindow","Modal","Navbar","NetworkIllustration","Newsletter","NotFound","Notice","OrderHistory","OrderSummary","PageFeedback","PageHeading","PagerLinks","Pagination","PasswordInput","PlanComparison","PostList","PreviewFrame","Pricing","ProcessSteps","ProductFilters","ProductList","ProductOverview","ProductQuickView","ProductReviews","ProgressBar","ProgressSteps","Prose","ProviderButtons","RadioGroup","Release","SaveBar","SearchDialog","SearchTrigger","Section","SectionHeading","SegmentedControl","Select","SettingsSection","ShoppingCart","Sidebar","SignInPanel","SlideOver","Stack","StackedList","StackedShell","StatGroup","Steps","Switch","TabNav","Table","Tabs","TeamGrid","Testimonial","TestimonialGrid","Text","TextArea","ThemeProvider","Toast","Toaster"],"types":["ActionPanelProps","ActivityFeedProps","AppShellProps","Appearance","Attachment","AttachmentListProps","AuthLayoutProps","AvatarGroupProps","AvatarProps","Brand","BrandAppearanceTokens","BrandDefinition","BreadcrumbItem","BreadcrumbsProps","ButtonGroupItem","ButtonProps","CalendarEvent","CalendarProps","CalendarView","CardProps","CartItem","ChatMessage","CheckListProps","ChoiceOption","CodeInputProps","CommandItem","CommandPaletteProps","ContainerProps","DataTableColumn","DataTableProps","Density","DescriptionListProps","DividerProps","DocsShellProps","DropdownItem","ErrorSummaryItem","FileNode","FilterChipProps","FilterFacet","FlyoutItem","GridListItem","GridListProps","HeaderLink","HeadingLevel","InputProps","ItemGroup","KbdProps","LinkAction","LinkItem","MediaObjectProps","MetricGroupProps","NavbarGroup","NavbarItem","NavbarProps","NavbarTone","NavigationItem","NetworkConnection","NetworkNode","Order","PageHeadingProps","PaginationProps","PasswordInputProps","PasswordRequirement","PasswordStrength","PricingExtra","PricingPlan","ProductCard","ProductImage","ProductListProps","ProductOption","ProductOverviewProps","ProgressBarProps","ProgressStep","ProgressStepsProps","ProseProps","ProviderButtonsProps","Review","SectionHeadingProps","SectionProps","SectionTone","SettingsSectionProps","ShoppingCartProps","SidebarProps","SignInPanelProps","SignInProvider","SlideOverProps","SortDirection","StackProps","StackedListItem","StackedListProps","StackedShellProps","TabNavItem","TabNavProps","TableProps","TableSort","TextProps","ThemeProviderProps","ToastAction","ToastItem","Tone"]},"examples":{"ActionLink":"import { ActionLink } from \"@tonycodes-ui/mortar\";\n\n<div className=\"m-actions\">\n <ActionLink {...action} />\n</div>","ActionPanel":"import { ActionPanel, Button, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"lg\">\n <ActionPanel\n title=\"Manage subscription\"\n description=\"Change your plan, update billing details or download invoices.\"\n action={<Button variant=\"secondary\">Change plan</Button>}\n />\n <ActionPanel\n title=\"Delete account\"\n description=\"Permanently remove your account and all of its data. This cannot be undone.\"\n tone=\"danger\"\n action={<Button variant=\"danger\">Delete account</Button>}\n />\n</Stack>","ActivityFeed":"import { ActivityFeed, Avatar } from \"@tonycodes-ui/mortar\";\n\n<ActivityFeed\n label=\"Recent activity\"\n items={[\n {\n id: \"1\",\n title: \"Deployment completed\",\n description: \"Production is up to date.\",\n time: \"2 minutes ago\",\n tone: \"success\",\n },\n {\n id: \"2\",\n title: \"Ana Kovač commented\",\n time: \"1 hour ago\",\n actor: <Avatar name=\"Ana Kovač\" size=\"sm\" />,\n body: \"Can we move the release to Thursday? Support is short-staffed on Friday.\",\n },\n ]}\n/>","ApiEndpoint":"import { ApiEndpoint, CodeTabs } from \"@tonycodes-ui/mortar\";\n\n<ApiEndpoint\n method=\"POST\"\n path=\"/v3/deployments\"\n title=\"Create a deployment\"\n description=\"Starts a build from a git ref.\"\n params={[\n {\n name: \"project\",\n type: \"string\",\n required: true,\n description: \"Project ID or slug.\",\n },\n ]}\n examples={\n <CodeTabs\n filename=\"Response\"\n language=\"201\"\n tabs={[\n { id: \"r\", label: \"Response\", code: '{ \"state\": \"queued\" }' },\n ]}\n />\n }\n/>","AppShell":"import { AppShell, Input, PageHeading } from \"@tonycodes-ui/mortar\";\n\n<AppShell\n brand=\"Northwind\"\n workspace=\"Overview\"\n navigation={[\n { label: \"Overview\", href: \"#example\", current: true },\n { label: \"Settings\", href: \"#settings\" },\n ]}\n>\n <div className=\"m-stack\">\n <PageHeading title=\"Workspace overview\" />\n <Input\n label=\"Project name\"\n defaultValue=\"Northwind\"\n hint=\"A name for your workspace\"\n />\n </div>\n</AppShell>","AppearanceControl":"import { AppearanceControl, Button, Input } from \"@tonycodes-ui/mortar\";\n\n<>\n <AppearanceControl />\n <Button>Primary action</Button>\n <Input\n label=\"Project name\"\n defaultValue=\"Northwind\"\n hint=\"A name for your workspace\"\n />\n</>","AttachmentList":"import { AttachmentList } from \"@tonycodes-ui/mortar\";\n\n<div className=\"max-w-xl\">\n <AttachmentList files={attachments} />\n</div>","AuthLayout":"import { AuthLayout, Button, Checkbox, Divider, Input, PasswordInput, ProviderButtons, Stack } from \"@tonycodes-ui/mortar\";\n\n<AuthLayout\n layout=\"cards\"\n logo=<svg viewBox=\"0 0 32 32\" className=\"text-primary\">\n <rect width=\"32\" height=\"32\" rx=\"8\" fill=\"currentColor\" />\n <path\n d=\"M10 21V11l6 6 6-6v10\"\n fill=\"none\"\n stroke=\"var(--m-on-primary)\"\n strokeWidth=\"2.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n title=\"Sign in to your account\"\n description=\"Welcome back to Northwind.\"\n footer={\n <>\n Not a member? <a href=\"#sign-up\">Start a 14-day free trial</a>\n </>\n }\n>\n <form onSubmit={(e) => e.preventDefault()}>\n <Input\n label=\"Email address\"\n type=\"email\"\n autoComplete=\"email\"\n required\n />\n <PasswordInput label=\"Password\" required />\n <Stack direction=\"row\" justify=\"between\" wrap>\n <Checkbox label=\"Remember me\" name=\"remember\" />\n <a href=\"#forgot\">Forgot password?</a>\n </Stack>\n <Button type=\"submit\">Sign in</Button>\n </form>\n <Divider label=\"or continue with\" soft spacing=\"none\" />\n <ProviderButtons\n layout=\"grid\"\n providers={[\n {\n id: \"github\",\n label: \"GitHub\",\n icon: authIcons.code,\n onSelect: () => setSelected(\"github\"),\n },\n {\n id: \"google\",\n label: \"Google\",\n icon: authIcons.globe,\n onSelect: () => setSelected(\"google\"),\n },\n ]}\n />\n</AuthLayout>","AvatarGroup":"import { AvatarGroup } from \"@tonycodes-ui/mortar\";\n\n<AvatarGroup\n label=\"Project members\"\n people={[\"Ana K\", \"Ben L\", \"Cy M\", \"Di N\", \"Ed O\", \"Flo P\"].map(\n (name) => ({ name }),\n )}\n/>","Avatar":"import { Avatar } from \"@tonycodes-ui/mortar\";\n\n<div className=\"m-actions\">\n <Avatar name=\"Ana Kovač\" size=\"xs\" />\n <Avatar name=\"Ana Kovač\" status=\"online\" />\n <Avatar name=\"Example Person\" size=\"lg\" shape=\"square\" />\n <Avatar name=\"Tom Cook\" size=\"xl\" />\n <Avatar name=\"Unknown member\" placeholder=\"icon\" />\n <Avatar\n name=\"Lindsay Walton\"\n placeholder=\"icon\"\n shape=\"square\"\n size=\"lg\"\n />\n <Avatar name=\"Tom Cook\" status=\"online\" statusPosition=\"top\" />\n</div>","Badge":"import { Badge } from \"@tonycodes-ui/mortar\";\n\n<>\n {([\"neutral\", \"info\", \"success\", \"warning\", \"danger\"] as const).map(\n (tone) => (\n <Badge key={tone} tone={tone}>\n {tone}\n </Badge>\n ),\n )}\n</>","Banner":"import { Banner, Button, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"lg\">\n {dismissed ? (\n <Button variant=\"secondary\" onClick={() => setDismissed(false)}>\n Show announcement\n </Button>\n ) : (\n <Banner\n action={{ label: \"Read the release notes\", href: \"#release\" }}\n onDismiss={() => setDismissed(true)}\n >\n Mortar 1.0 is out with 92 components.\n </Banner>\n )}\n <Banner label=\"Maintenance notice\" tone=\"default\">\n Scheduled maintenance on Sunday from 02:00 to 03:00 UTC.\n </Banner>\n <Banner\n label=\"Event notice\"\n variant=\"floating\"\n action={{ label: \"Register\", href: \"#register\" }}\n >\n Join the spring product webinar on 4 November.\n </Banner>\n {/* Layout containment keeps the fixed banner inside this example frame. */}\n <div\n className=\"m-stack\"\n style={{ contain: \"layout\", minHeight: 160 }}\n >\n <p>\n Page content stays reachable: the bottom banner can always be\n dismissed.\n </p>\n {notice ? (\n <Banner\n label=\"Cookie notice\"\n placement=\"bottom\"\n variant=\"floating\"\n tone=\"default\"\n dismissLabel=\"Dismiss cookie notice\"\n onDismiss={() => setNotice(false)}\n action={{ label: \"Cookie settings\", href: \"#cookies\" }}\n >\n We use essential cookies only.\n </Banner>\n ) : (\n <Button variant=\"secondary\" onClick={() => setNotice(true)}>\n Show cookie notice\n </Button>\n )}\n </div>\n <output aria-label=\"Banner state\">\n {dismissed ? \"dismissed\" : \"shown\"}\n </output>\n</Stack>","BentoGrid":"import { BentoGrid } from \"@tonycodes-ui/mortar\";\n\n<>\n <BentoGrid\n title=\"Layout\"\n items={[\n {\n title: \"Wide\",\n description: \"Spans two columns.\",\n span: 2,\n visual: (\n <div\n style={{\n background: \"var(--m-line)\",\n minHeight: 72,\n borderRadius: 8,\n }}\n />\n ),\n },\n {\n title: \"Focus\",\n description: \"An inverse tile.\",\n tone: \"inverse\",\n },\n ]}\n />\n <BentoGrid\n eyebrow=\"Platform\"\n title=\"Everything you need to ship\"\n description=\"Three columns, with tall tiles at both ends.\"\n tone=\"inverse\"\n items={[\n {\n title: \"Mobile friendly\",\n description: \"Every screen adapts from phone to desktop.\",\n rowSpan: 2,\n visual: <img alt=\"\" src={scenes[1]} style={art} />,\n },\n {\n title: \"Performance\",\n description: \"Pages render on the server and stream in.\",\n },\n {\n title: \"Powerful APIs\",\n description: \"Typed clients for every endpoint.\",\n rowSpan: 2,\n visual: <img alt=\"\" src={scenes[2]} style={art} />,\n },\n {\n title: \"Security\",\n description: \"Single sign-on and audit logs on every plan.\",\n },\n ]}\n />\n</>","Breadcrumbs":"import { Breadcrumbs, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"lg\">\n <Breadcrumbs\n items={[\n { label: \"Projects\", href: \"#projects\" },\n { label: \"Northwind\", href: \"#northwind\" },\n { label: \"Settings\" },\n ]}\n />\n <Breadcrumbs\n label=\"Folder path\"\n separator=\"chevron\"\n items={[\n { label: \"Documents\", href: \"#documents\" },\n { label: \"Contracts\", href: \"#contracts\" },\n { label: \"2026\" },\n ]}\n />\n</Stack>","ButtonGroup":"import { ButtonGroup, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"lg\">\n <ButtonGroup\n label=\"Record actions\"\n items={[\n { label: \"Copy\", onSelect: () => setLast(\"Copy\") },\n { label: \"Duplicate\", onSelect: () => setLast(\"Duplicate\") },\n { label: \"Archive\", disabled: true },\n ]}\n />\n <ButtonGroup\n label=\"Paging\"\n items={[\n {\n label: \"Previous\",\n iconOnly: true,\n icon: icon(\"M15 18l-6-6 6-6\"),\n onSelect: () => setLast(\"Previous\"),\n },\n {\n label: \"Next\",\n iconOnly: true,\n icon: icon(\"M9 18l6-6-6-6\"),\n onSelect: () => setLast(\"Next\"),\n },\n ]}\n />\n <ButtonGroup\n label=\"Resources\"\n items={[\n { label: \"Docs\", href: \"#docs\" },\n { label: \"Changelog\", href: \"#changelog\" },\n ]}\n />\n <output aria-label=\"Last action\">{last}</output>\n</Stack>","Button":"import { Button } from \"@tonycodes-ui/mortar\";\n\n<>\n <div className=\"m-actions\">\n <Button onClick={() => setChecked(true)}>Save changes</Button>\n <Button variant=\"secondary\">Cancel</Button>\n <Button variant=\"danger\">Delete</Button>\n <Button loading>Saving</Button>\n </div>\n <div className=\"m-actions\">\n <Button size=\"sm\" variant=\"secondary\">\n Small\n </Button>\n <Button size=\"lg\">Large</Button>\n <Button variant=\"secondary\" icon={icons.download}>\n Export CSV\n </Button>\n <Button variant=\"ghost\" icon={icons.edit} iconOnly>\n Edit project\n </Button>\n </div>\n <output aria-label=\"Action result\">\n {checked ? \"saved\" : \"idle\"}\n </output>\n</>","Calendar":"import { Button, Calendar, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"xl\">\n <div className=\"max-w-sm\">\n <Calendar\n today=\"2026-10-17\"\n selected={day}\n onSelect={setDay}\n events={meetings}\n />\n <output aria-label=\"Selected date\">{day}</output>\n <Button variant=\"ghost\" onClick={() => setDay(\"2026-12-03\")}>\n Select 3 December\n </Button>\n </div>\n <Calendar\n today=\"2026-10-17\"\n variant=\"full\"\n month=\"2026-10\"\n events={meetings}\n />\n <div>\n <Calendar\n today=\"2026-10-21\"\n selected=\"2026-10-20\"\n view={view}\n onViewChange={setView}\n events={schedule}\n onEventSelect={(id) =>\n setOpened(\n schedule.find((event) => event.id === id)?.title ?? id,\n )\n }\n />\n <output aria-label=\"Opened event\">{opened}</output>\n </div>\n <Calendar\n agenda\n today=\"2026-10-21\"\n selected={meetingDay}\n onSelect={setMeetingDay}\n events={agendaMeetings}\n onEventSelect={(id) =>\n setOpened(\n agendaMeetings.find((event) => event.id === id)?.title ?? id,\n )\n }\n />\n</Stack>","CallToAction":"import { CallToAction, MetricGroup, MockWindow } from \"@tonycodes-ui/mortar\";\n\n<>\n <CallToAction\n title=\"Start your next project\"\n description=\"Use one shared foundation.\"\n actions={[action]}\n />\n <CallToAction\n title=\"See every conversation in one place\"\n description=\"The inbox groups chats, bookings and follow-ups by customer.\"\n actions={[action, { label: \"Book a demo\", href: \"#demo\" }]}\n media={\n <MockWindow label=\"Northwind inbox\">\n <MetricGroup\n label=\"Today\"\n items={[\n { label: \"Open chats\", value: \"12\", icon: icons.inbox },\n { label: \"Bookings\", value: \"5\", icon: icons.calendar },\n ]}\n />\n </MockWindow>\n }\n />\n</>","Callout":"import { Callout } from \"@tonycodes-ui/mortar\";\n\n<>\n <Callout>Builds time out after 45 minutes.</Callout>\n <Callout tone=\"warning\">\n Changing the output directory invalidates the cache.\n </Callout>\n <Callout tone=\"danger\" title=\"Breaking\">\n This flag is removed in v4.\n </Callout>\n</>","Card":"import { Button, Card, Stack, Text } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"lg\">\n <Card\n as=\"section\"\n title=\"Billing\"\n description=\"Your plan renews on 1 November.\"\n actions={<Button variant=\"secondary\">Change plan</Button>}\n footer=\"Invoices are emailed to billing@example.com\"\n >\n <Text>\n Team plan, 12 seats. Usage resets at the start of each billing\n period.\n </Text>\n </Card>\n <Card tone=\"muted\" padding=\"compact\">\n <Text color=\"secondary\">\n A muted, compact card works as a well for secondary content.\n </Text>\n </Card>\n</Stack>","ChatPreview":"import { ChatPreview } from \"@tonycodes-ui/mortar\";\n\n<ChatPreview\n title=\"Northwind Assistant\"\n status=\"Typically replies instantly\"\n messages={[\n {\n from: \"assistant\",\n content: \"Hi! I can answer questions or book a consultation.\",\n },\n { from: \"user\", content: \"Can I book something next week?\" },\n {\n from: \"assistant\",\n content: (\n <>\n These slots are free:\n <ul>\n <li>Mon 10:00</li>\n <li>Tue 14:00</li>\n </ul>\n </>\n ),\n },\n ]}\n typing\n suggestions={[\"Mon 10:00\", \"Tue 14:00\", \"Something else\"]}\n/>","CheckList":"import { CheckList } from \"@tonycodes-ui/mortar\";\n\n<CheckList\n label=\"Included features\"\n columns={2}\n items={[\n \"Unlimited widgets\",\n \"Calendar booking\",\n \"Knowledge base training\",\n \"Email summaries\",\n ]}\n/>","Checkbox":"import { Checkbox, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"sm\">\n <Checkbox\n label=\"Email notifications\"\n checked={checked}\n onChange={(e) => setChecked(e.target.checked)}\n />\n <Checkbox\n label=\"Comments\"\n description=\"Get notified when someone comments on your post.\"\n checked={extra}\n onChange={(e) => setExtra(e.target.checked)}\n />\n <Checkbox\n label=\"I agree to the terms of service\"\n required\n checked={agreed}\n error={agreed ? undefined : \"Agree to the terms to continue\"}\n onChange={(e) => setAgreed(e.target.checked)}\n />\n</Stack>","CodeBlock":"import { CodeBlock } from \"@tonycodes-ui/mortar\";\n\n<CodeBlock\n label=\"Usage\"\n code=\"import { Button } from '@tonycodes-ui/mortar';\"\n/>","CodeInput":"import { CodeInput, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"xl\">\n <CodeInput\n label=\"Verification code\"\n hint=\"Enter the 6-digit code we sent to ana@example.com.\"\n value={code}\n onChange={setCode}\n onComplete={setCompleted}\n />\n <output aria-label=\"Completed code\">{completed}</output>\n <CodeInput\n label=\"Recovery code\"\n hint=\"One of the 8-character codes you saved when you set up two-factor authentication.\"\n alphanumeric\n length={8}\n value={recovery}\n onChange={setRecovery}\n />\n</Stack>","CodeTabs":"import { CodeTabs } from \"@tonycodes-ui/mortar\";\n\n<CodeTabs\n prompt=\"$\"\n tabs={[\n { id: \"npm\", label: \"npm\", code: \"npm i -g example\" },\n { id: \"pnpm\", label: \"pnpm\", code: \"pnpm add -g example\" },\n ]}\n/>","Combobox":"import { Combobox, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"lg\">\n <Combobox\n label=\"Assigned to\"\n options={people}\n value={value}\n onChange={setValue}\n hint=\"Only people on this project are listed.\"\n />\n <Combobox\n label=\"Region\"\n placeholder=\"Choose a region\"\n options={[\n { value: \"eu\", label: \"Europe (London)\" },\n { value: \"us\", label: \"United States (Virginia)\" },\n { value: \"ap\", label: \"Asia Pacific (Sydney)\" },\n ]}\n value={plain}\n onChange={setPlain}\n />\n <output aria-label=\"Selected value\">{value ?? \"none\"}</output>\n</Stack>","CommandPalette":"import { CommandPalette } from \"@tonycodes-ui/mortar\";\n\n<>\n {trigger(\"Open command menu\")}\n <CommandPalette\n open={open}\n onClose={() => setOpen(false)}\n query={query}\n onQueryChange={setQuery}\n groups={[\n {\n label: \"Actions\",\n items: [\n {\n id: \"new\",\n label: \"New deployment\",\n icon: icons.download,\n shortcut: [\"↵\"],\n onSelect: () => {},\n },\n {\n id: \"re\",\n label: \"Redeploy latest\",\n icon: icons.clock,\n shortcut: [\"⌘\", \"R\"],\n onSelect: () => {},\n },\n ],\n },\n ]}\n />\n</>","CommentComposer":"import { Avatar, Button, CommentComposer, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"lg\">\n <CommentComposer\n avatar={<Avatar name=\"Ana Kovač\" size=\"sm\" />}\n maxLength={280}\n hint=\"Markdown is not supported yet.\"\n preview={(text) =>\n text\n .split(/\\n{2,}/)\n .map((paragraph, i) => <p key={i}>{paragraph}</p>)\n }\n actions={\n <>\n <Button\n variant=\"ghost\"\n size=\"sm\"\n icon={icons.attach}\n iconOnly\n >\n Attach a file\n </Button>\n <Button\n variant=\"ghost\"\n size=\"sm\"\n icon={icons.smile}\n iconOnly\n >\n Add an emoji\n </Button>\n </>\n }\n onSubmit={(text) => setComments((current) => [...current, text])}\n />\n <ul aria-label=\"Posted comments\">\n {comments.map((comment, i) => (\n <li key={i}>{comment}</li>\n ))}\n </ul>\n</Stack>","ConfirmDialog":"import { ConfirmDialog } from \"@tonycodes-ui/mortar\";\n\n<>\n {trigger(\"Delete project\")}\n <ConfirmDialog\n open={open}\n onClose={() => setOpen(false)}\n onConfirm={() => setOpen(false)}\n title=\"Delete project?\"\n description=\"This removes the project, its deployments and environment variables.\"\n confirmLabel=\"Delete project\"\n confirmationText=\"Northwind\"\n />\n</>","ContactSection":"import { Button, ContactSection, Input, TextArea } from \"@tonycodes-ui/mortar\";\n\n<div>\n <ContactSection\n title=\"Talk to sales\"\n description=\"We reply within one business day.\"\n details={[{ label: \"Email\", value: \"sales@example.com\" }]}\n >\n <Input label=\"Work email\" type=\"email\" />\n <TextArea label=\"How can we help?\" />\n <Button type=\"submit\">Send message</Button>\n </ContactSection>\n <ContactSection\n title=\"Visit or write to us\"\n headingLevel={3}\n description=\"Our support team is online on weekdays.\"\n details={[{ label: \"Phone\", value: \"+44 20 7946 0000\" }]}\n media={<img alt=\"\" src={scene(600, 800, \"c9dcef\", \"51785f\")} />}\n >\n <Input label=\"Your email\" type=\"email\" />\n <TextArea label=\"Message\" />\n <Button type=\"submit\">Send</Button>\n </ContactSection>\n <ContactSection\n title=\"Our offices\"\n headingLevel={3}\n description=\"Drop by any weekday between 9 and 5.\"\n offices={[\n {\n name: \"London\",\n address: (\n <>\n 12 Example Street\n <br />\n London EC1A 1AA\n </>\n ),\n },\n {\n name: \"Lisbon\",\n address: (\n <>\n Rua Exemplo 34\n <br />\n 1200-001 Lisboa\n </>\n ),\n },\n {\n name: \"Toronto\",\n address: (\n <>\n 56 Sample Avenue\n <br />\n Toronto ON M5V 2T6\n </>\n ),\n },\n {\n name: \"Sydney\",\n address: (\n <>\n 78 Demo Road\n <br />\n Sydney NSW 2000\n </>\n ),\n },\n ]}\n />\n</div>","Container":"import { Container, Text } from \"@tonycodes-ui/mortar\";\n\n<Container size=\"md\">\n <Text color=\"secondary\">\n A medium container keeps reading width comfortable on wide screens.\n </Text>\n</Container>","ContentSection":"import { Avatar, ContentSection, MetricGroup, MockWindow } from \"@tonycodes-ui/mortar\";\n\n<>\n <ContentSection\n eyebrow=\"Our story\"\n title=\"Why Mortar exists\"\n description=\"Every product we worked on rebuilt the same buttons, forms and page shells.\"\n media={\n <MockWindow label=\"Northwind dashboard\">\n <MetricGroup\n label=\"This week\"\n items={[\n { label: \"Deploys\", value: \"48\" },\n { label: \"Incidents\", value: \"1\" },\n ]}\n />\n </MockWindow>\n }\n >\n <p>\n Each rebuild drifted: different focus rings, different dark modes,\n different accessibility bugs. Fixing one product never fixed the\n others.\n </p>\n <p>\n Mortar puts those decisions in one place. Components ship with\n typed contracts, both themes and executable accessibility checks,\n so a fix lands everywhere at once.\n </p>\n </ContentSection>\n <ContentSection\n eyebrow=\"Our mission\"\n title=\"On a mission to make shipping boring\"\n description=\"We want every release to feel like a non-event.\"\n media={<img alt=\"\" src={scenes[3]} />}\n mediaPosition=\"start\"\n stats={[\n { label: \"Founded\", value: \"2021\" },\n { label: \"Employees\", value: \"37\" },\n { label: \"Countries\", value: \"12\" },\n { label: \"Raised\", value: \"$25M\" },\n ]}\n >\n <p>\n Releases used to take a war room. Now a typed contract and a\n shared test suite catch the regressions before anyone has to.\n </p>\n </ContentSection>\n <ContentSection\n eyebrow=\"Case study\"\n title=\"How Wheelhouse halved its support queue\"\n description=\"One inbox for chats, bookings and follow-ups.\"\n tone=\"muted\"\n testimonial={{\n quote:\n \"We answered twice as many customers in the first month, without hiring.\",\n name: \"Lindsay Walton\",\n role: \"Owner, Wheelhouse Bikes\",\n avatar: <Avatar name=\"Lindsay Walton\" decorative />,\n }}\n >\n <p>\n Wheelhouse moved three channels into one shared queue and set up\n saved replies for the questions they hear every day.\n </p>\n </ContentSection>\n</>","DataTable":"import { Badge, Button, DataTable, Pagination, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"xl\">\n <DataTable\n caption=\"Projects\"\n rowLabel={(row) => row.name}\n rowHref={(row) => `#project-${row.id}`}\n defaultSort={{ key: \"name\", direction: \"ascending\" }}\n selectedIds={selectedRows}\n onSelectionChange={setSelectedRows}\n striped\n columns={[\n {\n key: \"name\",\n label: \"Name\",\n render: (row) => row.name,\n sortable: true,\n },\n {\n key: \"status\",\n label: \"Status\",\n render: (row) => <Badge>{row.status}</Badge>,\n },\n {\n key: \"owner\",\n label: \"Owner\",\n render: (row) => row.owner,\n truncate: true,\n width: \"30%\",\n },\n {\n key: \"requests\",\n label: \"Requests\",\n align: \"end\",\n render: (row) => row.requests.toLocaleString(\"en-GB\"),\n sortable: true,\n },\n {\n key: \"actions\",\n label: \"Actions\",\n render: (row) => (\n <Button onClick={() => setPage(2)}>\n Edit {row.name}\n </Button>\n ),\n },\n ]}\n rows={[\n {\n id: \"northwind\",\n name: \"Northwind\",\n status: \"Active\",\n owner: \"Platform team with a deliberately long owner name\",\n requests: 12840,\n },\n {\n id: \"acme\",\n name: \"Acme\",\n status: \"Paused\",\n owner: \"Growth\",\n requests: 920,\n },\n {\n id: \"zephyr\",\n name: \"Zephyr\",\n status: \"Active\",\n owner: \"Data\",\n requests: 4310,\n },\n ]}\n footer={\n <Pagination page={page} pageCount={3} onChange={setPage} />\n }\n />\n <DataTable\n caption=\"People by office\"\n rowLabel={(row) => row.name}\n groupBy={(row) => row.office}\n defaultSort={{ key: \"name\", direction: \"ascending\" }}\n selectedIds={selectedPeople}\n onSelectionChange={setSelectedPeople}\n columns={[\n {\n key: \"name\",\n label: \"Name\",\n render: (row) => row.name,\n sortable: true,\n },\n { key: \"title\", label: \"Title\", render: (row) => row.title },\n { key: \"email\", label: \"Email\", render: (row) => row.email },\n { key: \"role\", label: \"Role\", render: (row) => row.role },\n ]}\n rows={[\n {\n id: \"lindsay\",\n name: \"Lindsay Walton\",\n title: \"Front-end developer\",\n email: \"lindsay@example.com\",\n role: \"Member\",\n office: \"Edinburgh\",\n },\n {\n id: \"tom\",\n name: \"Tom Cook\",\n title: \"Director of product\",\n email: \"tom@example.com\",\n role: \"Admin\",\n office: \"London\",\n },\n {\n id: \"courtney\",\n name: \"Courtney Henry\",\n title: \"Designer\",\n email: \"courtney@example.com\",\n role: \"Admin\",\n office: \"Edinburgh\",\n },\n {\n id: \"whitney\",\n name: \"Whitney Francis\",\n title: \"Copywriter\",\n email: \"whitney@example.com\",\n role: \"Member\",\n office: \"London\",\n },\n {\n id: \"leonard\",\n name: \"Leonard Krasner\",\n title: \"Senior designer\",\n email: \"leonard@example.com\",\n role: \"Owner\",\n office: \"London\",\n },\n ]}\n />\n</Stack>","DescriptionList":"import { ActionLink, AttachmentList, Badge, Card, DescriptionList, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"xl\">\n <DescriptionList\n title=\"Applicant information\"\n description=\"Personal details and application.\"\n items={[\n { term: \"Full name\", details: \"Margot Foster\" },\n {\n term: \"Attachments\",\n details: <AttachmentList files={attachments} />,\n },\n {\n term: \"Application for\",\n details: \"Backend developer\",\n action: (\n <ActionLink label=\"Update\" href=\"#role\" variant=\"ghost\" />\n ),\n },\n { term: \"Email address\", details: \"margot@example.com\" },\n { term: \"Salary expectation\", details: \"$120,000\" },\n {\n term: \"About\",\n details:\n \"Fugiat ipsum ipsum deserunt culpa aute sint do nostrud anim incididunt cillum culpa consequat.\",\n },\n ]}\n />\n <Card title=\"Deployment\" headingLevel={2}>\n <DescriptionList\n layout=\"stacked\"\n items={[\n { term: \"Region\", details: \"eu-west-2\" },\n {\n term: \"Status\",\n details: <Badge tone=\"success\">Live</Badge>,\n },\n ]}\n />\n </Card>\n <DescriptionList\n title=\"Billing details\"\n description=\"Plan, payment and invoices.\"\n variant=\"striped\"\n items={[\n { term: \"Plan\", details: \"Team, billed yearly\" },\n { term: \"Seats\", details: \"12 of 15 in use\" },\n { term: \"Payment method\", details: \"Visa ending 4242\" },\n { term: \"Next invoice\", details: \"1 November 2026\" },\n ]}\n />\n <Card\n title=\"Candidate\"\n description=\"Shown in a card: the card carries the title.\"\n headingLevel={2}\n >\n <DescriptionList\n items={[\n { term: \"Full name\", details: \"Margot Foster\" },\n { term: \"Role\", details: \"Backend developer\" },\n { term: \"Email address\", details: \"margot@example.com\" },\n {\n term: \"Stage\",\n details: <Badge tone=\"info\">Interviewing</Badge>,\n action: (\n <ActionLink label=\"Move\" href=\"#stage\" variant=\"ghost\" />\n ),\n },\n ]}\n />\n </Card>\n</Stack>","Divider":"import { Button, Divider, Stack, Text } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"none\">\n <Text>Account details</Text>\n <Divider />\n <Text>Notification preferences</Text>\n <Divider soft spacing=\"sm\" />\n <Text color=\"secondary\">\n A soft divider separates related rows.\n </Text>\n <Divider label=\"Or continue with\" />\n <Button variant=\"secondary\">Single sign-on</Button>\n</Stack>","DocsShell":"import { DocsShell, SearchTrigger } from \"@tonycodes-ui/mortar\";\n\n<DocsShell\n brand=\"Example Docs\"\n version=\"v3.2\"\n sections={[\n { label: \"Guides\", href: \"#guides\", current: true },\n { label: \"API\", href: \"#api\" },\n ]}\n navigation={[\n {\n label: \"Getting started\",\n items: [\n { label: \"Quickstart\", href: \"#quickstart\", current: true },\n { label: \"Project structure\", href: \"#structure\" },\n ],\n },\n ]}\n toc={[{ id: \"install\", label: \"Install the CLI\", current: true }]}\n search={<SearchTrigger onOpen={() => setOpen(true)} />}\n>\n <h1>Quickstart</h1>\n</DocsShell>","Dropdown":"import { Dropdown } from \"@tonycodes-ui/mortar\";\n\n<div className=\"m-actions\">\n <Dropdown\n label=\"Actions\"\n items={[\n { label: \"Duplicate\", onSelect: () => setChecked(true) },\n {\n label: \"Delete\",\n danger: true,\n onSelect: () => setChecked(false),\n },\n ]}\n />\n <Dropdown\n label=\"More options\"\n icon={icons.more}\n iconOnly\n variant=\"ghost\"\n header=\"Signed in as ana@example.com\"\n items={[\n {\n section: \"Project\",\n label: \"Edit\",\n icon: icons.edit,\n description: \"Rename or change details\",\n onSelect: () => setMenuChoice(\"edit\"),\n },\n {\n section: \"Project\",\n label: \"Export\",\n icon: icons.download,\n onSelect: () => setMenuChoice(\"export\"),\n },\n {\n section: \"Help\",\n label: \"Documentation\",\n href: \"#docs\",\n },\n ]}\n />\n <output aria-label=\"Menu choice\">{menuChoice}</output>\n</div>","EmptyState":"import { Avatar, Button, EmptyState, Stack, StackedList } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"xl\">\n <EmptyState\n title=\"No projects yet\"\n description=\"Create your first project to get started.\"\n icon={icons.inbox}\n action={<Button>Create project</Button>}\n />\n <EmptyState\n dashed\n title=\"No databases\"\n description=\"Connect a database to start syncing records.\"\n icon={icons.download}\n action={<Button variant=\"secondary\">Add database</Button>}\n />\n <EmptyState\n align=\"start\"\n title=\"Projects\"\n description=\"You haven’t created a project yet. Get started by selecting a template or start from an empty project.\"\n >\n <Stack gap=\"md\" align=\"start\">\n <StackedList\n label=\"Project templates\"\n items={[\n {\n id: \"list\",\n title: \"Create a list\",\n description:\n \"Another to-do system you’ll try but eventually give up on.\",\n href: \"#example\",\n leading: (\n <span className=\"m-empty-icon\" aria-hidden=\"true\">\n {icons.edit}\n </span>\n ),\n },\n {\n id: \"calendar\",\n title: \"Create a calendar\",\n description: \"Stay on top of your deadlines, or don’t.\",\n href: \"#example\",\n leading: (\n <span className=\"m-empty-icon\" aria-hidden=\"true\">\n {icons.calendar}\n </span>\n ),\n },\n {\n id: \"timeline\",\n title: \"Create a timeline\",\n description:\n \"Get a birds-eye view of your procrastination.\",\n href: \"#example\",\n leading: (\n <span className=\"m-empty-icon\" aria-hidden=\"true\">\n {icons.clock}\n </span>\n ),\n },\n ]}\n />\n <a href=\"#example\">Or start from an empty project →</a>\n </Stack>\n </EmptyState>\n <EmptyState\n title=\"Add team members\"\n description=\"You haven’t added any team members to your project yet.\"\n icon={icons.mail}\n >\n <StackedList\n label=\"Team members previously added to projects\"\n items={[\"Lindsay Walton\", \"Courtney Henry\", \"Tom Cook\"].map(\n (person) => ({\n id: person,\n title: person,\n description: \"Designer\",\n leading: <Avatar name={person} size=\"sm\" decorative />,\n trailing: (\n <Button\n variant=\"secondary\"\n size=\"sm\"\n aria-label={`Invite ${person}`}\n >\n Invite\n </Button>\n ),\n }),\n )}\n />\n </EmptyState>\n</Stack>","ErrorSummary":"import { ErrorSummary } from \"@tonycodes-ui/mortar\";\n\n<ErrorSummaryExample />","FAQ":"import { FAQ } from \"@tonycodes-ui/mortar\";\n\n<>\n <FAQ\n title=\"Questions\"\n items={[\n {\n question: \"Is the kit open source?\",\n answer: \"Yes. Mortar is MIT licensed.\",\n },\n ]}\n />\n <FAQ\n title=\"Everything else\"\n description=\"Answers stay visible so they can be scanned.\"\n layout=\"grid\"\n items={[\n {\n question: \"Does it support dark mode?\",\n answer: \"Yes. Every component reads the semantic tokens.\",\n },\n {\n question: \"Can I change the brand colour?\",\n answer: \"Set the accent token once in your theme.\",\n },\n {\n question: \"Which frameworks are supported?\",\n answer: \"React 19 with Tailwind CSS 4.\",\n },\n ]}\n />\n</>","FeatureGrid":"import { FeatureGrid } from \"@tonycodes-ui/mortar\";\n\n<>\n <FeatureGrid\n title=\"Made to work together\"\n items={items.map((item, i) => ({\n ...item,\n icon: [icons.calendar, icons.inbox][i],\n }))}\n />\n <FeatureGrid\n title=\"Numbered for sequences\"\n marker=\"number\"\n tone=\"muted\"\n items={items}\n />\n</>","FeatureSection":"import { CheckList, CodeBlock, FeatureSection, Input, MockWindow } from \"@tonycodes-ui/mortar\";\n\n<>\n <FeatureSection\n eyebrow=\"Theming\"\n title=\"Your brand, centrally managed\"\n description=\"Choose a theme in one place.\"\n details={\n <CheckList items={[\"Light and dark\", \"Brand colours\"]} />\n }\n >\n <Input\n label=\"Project name\"\n defaultValue=\"Northwind\"\n hint=\"A name for your workspace\"\n />\n </FeatureSection>\n <FeatureSection\n eyebrow=\"Dashboard\"\n title=\"See the whole account at a glance\"\n description=\"The screenshot runs past the edge so the product feels bigger than the page.\"\n offset\n framed={false}\n >\n <MockWindow label=\"Northwind dashboard\" address=\"northwind.app\">\n <img\n alt=\"Dashboard with revenue cards and recent orders\"\n src={screenshot}\n />\n </MockWindow>\n </FeatureSection>\n <FeatureSection\n eyebrow=\"API\"\n title=\"Ship your first request in minutes\"\n description=\"One typed client for every endpoint.\"\n tone=\"inverse\"\n framed={false}\n reverse\n >\n <CodeBlock\n label=\"send-invite.ts\"\n code={`import { Northwind } from \"@northwind/sdk\";\\n\\nconst client = new Northwind(key);\\n\\nawait client.invites.create({\\n email: \"ana@example.com\",\\n role: \"editor\",\\n});`}\n />\n </FeatureSection>\n</>","Fieldset":"import { Fieldset, Input, Select } from \"@tonycodes-ui/mortar\";\n\n<div className=\"max-w-md\">\n <Fieldset\n legend=\"Shipping address\"\n description=\"We only ship to the countries listed.\"\n >\n <Input label=\"Street address\" />\n <Input label=\"City\" />\n <Select\n label=\"Country\"\n options={[\n { value: \"gb\", label: \"United Kingdom\" },\n { value: \"ie\", label: \"Ireland\" },\n ]}\n />\n </Fieldset>\n</div>","FileTree":"import { FileTree } from \"@tonycodes-ui/mortar\";\n\n<FileTree\n label=\"Project files\"\n items={[\n {\n name: \"app\",\n children: [\n { name: \"page.tsx\", highlighted: true, note: \"entry\" },\n ],\n },\n { name: \"package.json\" },\n ]}\n/>","FilterChip":"import { FilterChip } from \"@tonycodes-ui/mortar\";\n\n<div className=\"m-actions\">\n <FilterChip\n label=\"Status\"\n selected={selected}\n onClick={() => setSelected(!selected)}\n />\n {filters.map((filter) => (\n <FilterChip\n key={filter}\n label={filter}\n onRemove={() =>\n setFilters((current) => current.filter((f) => f !== filter))\n }\n />\n ))}\n</div>","Footer":"import { Footer, Newsletter } from \"@tonycodes-ui/mortar\";\n\n<>\n <Footer\n brand=\"Northwind\"\n description=\"Example product\"\n note=\"Weekdays 9 to 5\"\n columns={[{ label: \"Product\", items: [action] }]}\n copyright=\"© Example company\"\n social={[\n {\n label: \"Northwind website\",\n href: \"#website\",\n icon: icons.globe,\n },\n {\n label: \"Northwind on GitHub\",\n href: \"#github\",\n icon: icons.code,\n },\n { label: \"Email Northwind\", href: \"#email\", icon: icons.mail },\n ]}\n />\n <Footer\n brand=\"Northwind\"\n description=\"Support software for small teams.\"\n columns={[\n {\n label: \"Company\",\n items: [\n { label: \"About\", href: \"#about\" },\n { label: \"Customers\", href: \"#customers\" },\n { label: \"Careers\", href: \"#careers\" },\n ],\n },\n ]}\n copyright=\"© Example company\"\n legal={[{ label: \"Privacy\", href: \"#privacy\" }]}\n newsletter={\n <Newsletter\n title=\"Subscribe to product news\"\n description=\"One email a month. Unsubscribe any time.\"\n onSubmit={() => setExtra(true)}\n status={extra ? \"success\" : \"idle\"}\n />\n }\n />\n <Footer\n layout=\"center\"\n brand=\"Atlas\"\n description=\"Scheduling for clinics and agencies.\"\n columns={[\n {\n label: \"Footer\",\n items: [\n { label: \"About\", href: \"#about-atlas\" },\n { label: \"Blog\", href: \"#blog\" },\n { label: \"Jobs\", href: \"#jobs\" },\n { label: \"Press\", href: \"#press\" },\n { label: \"Accessibility\", href: \"#accessibility\" },\n ],\n },\n ]}\n copyright=\"© Example company\"\n social={[\n { label: \"Atlas website\", href: \"#atlas-web\", icon: icons.globe },\n { label: \"Atlas on GitHub\", href: \"#atlas-gh\", icon: icons.code },\n ]}\n />\n <Footer\n layout=\"inline\"\n brand=\"Atlas\"\n note=\"Made for clinics and agencies.\"\n columns={[\n {\n label: \"Product links\",\n items: [\n { label: \"Status\", href: \"#status\" },\n { label: \"Changelog\", href: \"#changelog\" },\n ],\n },\n ]}\n copyright=\"© Example company\"\n legal={[{ label: \"Privacy\", href: \"#atlas-privacy\" }]}\n />\n</>","GridList":"import { ActionLink, Avatar, Badge, GridList, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"xl\">\n <GridList\n label=\"Team members\"\n items={[\n {\n id: \"ana\",\n title: \"Ana Kovač\",\n description: \"Engineering lead\",\n href: \"#ana\",\n media: <Avatar name=\"Ana Kovač\" decorative />,\n meta: (\n <>\n <Badge tone=\"success\">Admin</Badge>\n <a href=\"#team-platform\">Platform team</a>\n </>\n ),\n actions: (\n <ActionLink\n label=\"Email Ana\"\n href=\"#email-ana\"\n variant=\"secondary\"\n />\n ),\n },\n {\n id: \"tom\",\n title: \"Tom Cook\",\n description: \"Product designer\",\n href: \"#tom\",\n media: <Avatar name=\"Tom Cook\" decorative />,\n },\n {\n id: \"lindsay\",\n title: \"Lindsay Walton\",\n description: \"Support\",\n href: \"#lindsay\",\n media: <Avatar name=\"Lindsay Walton\" decorative />,\n },\n ]}\n />\n <GridList\n label=\"Projects\"\n columns={2}\n items={[\n {\n id: \"billing\",\n title: \"Billing redesign\",\n description: \"12 open tasks · due 30 October\",\n meta: <Badge tone=\"warning\">At risk</Badge>,\n },\n {\n id: \"search\",\n title: \"Search relevance\",\n description: \"4 open tasks · due 14 November\",\n meta: <Badge>On track</Badge>,\n },\n ]}\n />\n <GridList\n label=\"Contacts\"\n actionsLayout=\"split\"\n items={[\n { id: \"jane\", name: \"Jane Cooper\", role: \"Regional paradigm\" },\n { id: \"cody\", name: \"Cody Fisher\", role: \"Product directives\" },\n { id: \"esther\", name: \"Esther Howard\", role: \"Forward response\" },\n ].map((person) => ({\n id: person.id,\n title: person.name,\n description: person.role,\n media: <Avatar name={person.name} decorative />,\n actions: (\n <>\n <a href={`#email-${person.id}`}>\n {icons.mail}Email\n <span className=\"m-sr-only\"> {person.name}</span>\n </a>\n <a href={`#meet-${person.id}`}>\n {icons.calendar}Schedule\n <span className=\"m-sr-only\"> with {person.name}</span>\n </a>\n </>\n ),\n }))}\n />\n <GridList\n label=\"Clients\"\n columns={2}\n items={[\n {\n id: \"tuple\",\n title: \"Tuple\",\n href: \"#client-tuple\",\n media: <Avatar name=\"Tuple\" shape=\"square\" decorative />,\n details: [\n { term: \"Last invoice\", details: \"14 October 2026\" },\n {\n term: \"Amount\",\n details: (\n <>\n £2,000.00 <Badge tone=\"danger\">Overdue</Badge>\n </>\n ),\n },\n ],\n },\n {\n id: \"savvycal\",\n title: \"SavvyCal\",\n href: \"#client-savvycal\",\n media: <Avatar name=\"SavvyCal\" shape=\"square\" decorative />,\n details: [\n { term: \"Last invoice\", details: \"2 October 2026\" },\n {\n term: \"Amount\",\n details: (\n <>\n £14,000.00 <Badge tone=\"success\">Paid</Badge>\n </>\n ),\n },\n ],\n },\n ]}\n />\n</Stack>","HeaderSection":"import { HeaderSection } from \"@tonycodes-ui/mortar\";\n\n<>\n <HeaderSection\n eyebrow=\"About us\"\n title=\"We build the foundations other teams ship on\"\n description=\"Mortar started as one team's design system. Now it powers product, marketing and documentation sites.\"\n links={[\n { label: \"Open roles\", href: \"#roles\" },\n { label: \"Our values\", href: \"#values\" },\n ]}\n stats={[\n { label: \"Components\", value: \"100\" },\n { label: \"Teams using Mortar\", value: \"40+\" },\n { label: \"Accessibility checks per release\", value: \"300\" },\n ]}\n />\n <HeaderSection\n title=\"Simple, transparent pricing\"\n description=\"One plan per team size. No per-seat surprises.\"\n tone=\"inverse\"\n align=\"center\"\n headingLevel={2}\n />\n</>","Hero":"import { Hero, MockWindow, StackedList } from \"@tonycodes-ui/mortar\";\n\n<>\n <Hero\n title=\"Build with confidence.\"\n description=\"One shared foundation for your next product.\"\n actions={[action]}\n />\n <Hero\n headingLevel={2}\n eyebrow=\"New in spring\"\n title=\"Plan trips the whole team can see.\"\n description=\"Itineraries, bookings and budgets stay in one shared place.\"\n actions={[action, { label: \"Take the tour\", href: \"#tour\" }]}\n background={\n <img\n alt=\"\"\n src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f6d365'/%3E%3Cstop offset='1' stop-color='%23fda085'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='600' fill='url(%23s)'/%3E%3Ccircle cx='880' cy='190' r='90' fill='%23fff3c4'/%3E%3Cpath d='M0 420 L220 250 L420 400 L640 220 L900 430 L1200 280 L1200 600 L0 600Z' fill='%234b6cb7'/%3E%3Cpath d='M0 500 L300 380 L560 500 L820 360 L1200 520 L1200 600 L0 600Z' fill='%23243b55'/%3E%3C/svg%3E\"\n />\n }\n />\n <Hero\n headingLevel={2}\n layout=\"split\"\n wide=\"copy\"\n title=\"Your inbox, in your pocket.\"\n emphasis=\"in your pocket\"\n description=\"Reply to customers from anywhere with the mobile app.\"\n actions={[action]}\n note={<p>Free for teams of up to five.</p>}\n >\n <MockWindow variant=\"phone\" label=\"Northwind mobile inbox\">\n <StackedList\n label=\"Conversations\"\n items={[\n {\n id: \"ana\",\n title: \"Ana Kovač\",\n description: \"Can I move my booking?\",\n },\n {\n id: \"tom\",\n title: \"Tom Cook\",\n description: \"Thanks, that worked.\",\n },\n {\n id: \"lia\",\n title: \"Lia Chen\",\n description: \"Is parking included?\",\n },\n ]}\n />\n </MockWindow>\n </Hero>\n <Hero\n headingLevel={2}\n layout=\"split\"\n title=\"Every trip, in one shared place.\"\n description=\"Photos, plans and bookings stay together for the whole group.\"\n actions={[action]}\n images={scenes.map((src) => (\n <img key={src} alt=\"\" src={src} />\n ))}\n />\n <Hero\n headingLevel={2}\n layout=\"angled\"\n eyebrow=\"Field notes\"\n title=\"Plan the route before you leave.\"\n description=\"Offline maps and shared checklists for every expedition.\"\n actions={[action]}\n >\n <img alt=\"\" src={scenes[1]} />\n </Hero>\n</>","Input":"import { Button, Input } from \"@tonycodes-ui/mortar\";\n\n<>\n <Input\n label=\"Project name\"\n defaultValue=\"Northwind\"\n hint=\"A name for your workspace\"\n />\n <Input label=\"Email\" error=\"Enter a valid email address\" />\n <Input\n label=\"Search candidates\"\n type=\"search\"\n leadingIcon={icons.search}\n action={\n <Button\n variant=\"secondary\"\n onClick={() => setChecked(!checked)}\n aria-pressed={checked}\n >\n Sort\n </Button>\n }\n />\n <Input label=\"Website\" prefix=\"https://\" suffix=\".com\" />\n</>","Kbd":"import { Kbd } from \"@tonycodes-ui/mortar\";\n\n<p>\n Press <Kbd keys={[\"⌘\", \"K\"]} /> to search.\n</p>","LinkCards":"import { LinkCards } from \"@tonycodes-ui/mortar\";\n\n<LinkCards\n items={[\n {\n href: \"#env\",\n label: \"Environment variables\",\n description: \"Add secrets per environment.\",\n },\n ]}\n/>","Listbox":"import { Listbox, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"lg\">\n <Listbox\n label=\"Assigned to\"\n options={people}\n value={value}\n onChange={setValue}\n hint=\"Only people on this project are listed.\"\n />\n <Listbox\n label=\"Region\"\n placeholder=\"Choose a region\"\n options={[\n { value: \"eu\", label: \"Europe (London)\" },\n { value: \"us\", label: \"United States (Virginia)\" },\n { value: \"ap\", label: \"Asia Pacific (Sydney)\" },\n ]}\n value={plain}\n onChange={setPlain}\n />\n <output aria-label=\"Selected value\">{value ?? \"none\"}</output>\n</Stack>","LogoCloud":"import { LogoCloud } from \"@tonycodes-ui/mortar\";\n\n<>\n <LogoCloud\n label=\"Example companies\"\n items={[\n { name: \"Northwind\" },\n { name: \"Contoso\" },\n { name: \"Fabrikam\" },\n ]}\n />\n <LogoCloud\n label=\"Teams on the grid\"\n layout=\"grid\"\n items={[\n { name: \"Tailspin\" },\n { name: \"Litware\" },\n { name: \"Proseware\" },\n { name: \"Adatum\" },\n ]}\n />\n <LogoCloud\n label=\"Customer logos\"\n layout=\"split\"\n title=\"Trusted by teams that ship every day\"\n description=\"From two-person studios to global support desks.\"\n actions={[{ label: \"Read case studies\", href: \"#cases\" }]}\n items={[\n { name: \"Woodgrove\" },\n { name: \"Wingtip\" },\n { name: \"Relecloud\" },\n { name: \"Lucerne\" },\n ]}\n />\n</>","MarketingHeader":"import { MarketingHeader } from \"@tonycodes-ui/mortar\";\n\n<>\n <MarketingHeader\n brand=\"Northwind\"\n id=\"site-header\"\n logo={\n <img\n alt=\"\"\n src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' rx='3' fill='currentColor'/%3E%3C/svg%3E\"\n />\n }\n links={[\n {\n label: \"Product\",\n items: [\n {\n label: \"Analytics\",\n href: \"#analytics\",\n description: \"See where your visitors come from.\",\n icon: icons.clock,\n },\n {\n label: \"Inbox\",\n href: \"#inbox\",\n description: \"Every conversation in one place.\",\n icon: icons.inbox,\n },\n {\n label: \"Scheduling\",\n href: \"#scheduling\",\n description: \"Let customers book time with you.\",\n icon: icons.calendar,\n },\n ],\n footer: [\n { label: \"Watch demo\", href: \"#demo\" },\n { label: \"Contact sales\", href: \"#sales\" },\n ],\n },\n { label: \"Features\", href: \"#features\" },\n { label: \"Pricing\", href: \"#pricing\" },\n ]}\n action={action}\n />\n <MarketingHeader\n brand=\"Atlas\"\n tagline=\"Clinic scheduling\"\n homeHref=\"#atlas\"\n layout=\"center\"\n mobileMenu=\"panel\"\n links={[\n {\n label: \"Solutions\",\n layout: \"full\",\n items: [\n {\n label: \"Retail\",\n href: \"#retail\",\n description: \"Stock and orders across every shop.\",\n icon: icons.inbox,\n },\n {\n label: \"Clinics\",\n href: \"#clinics\",\n description: \"Appointments patients can book.\",\n icon: icons.calendar,\n },\n {\n label: \"Agencies\",\n href: \"#agencies\",\n description: \"Time tracked against every client.\",\n icon: icons.clock,\n },\n {\n label: \"Nonprofits\",\n href: \"#nonprofits\",\n description: \"Donor records in one place.\",\n icon: icons.globe,\n },\n ],\n footer: [\n { label: \"Customer stories\", href: \"#stories\" },\n { label: \"Book a demo\", href: \"#book\" },\n ],\n },\n {\n label: \"Resources\",\n layout: \"columns\",\n items: [\n {\n label: \"Guides\",\n href: \"#guides\",\n description: \"Step-by-step setup help.\",\n icon: icons.edit,\n },\n {\n label: \"API\",\n href: \"#api\",\n description: \"Build on Atlas.\",\n icon: icons.code,\n },\n {\n label: \"Webinars\",\n href: \"#webinars\",\n description: \"Live sessions every month.\",\n icon: icons.clock,\n },\n {\n label: \"Support\",\n href: \"#support\",\n description: \"Talk to a person.\",\n icon: icons.mail,\n },\n ],\n footer: [\n { label: \"Status\", href: \"#status\" },\n { label: \"Changelog\", href: \"#changelog\" },\n ],\n },\n ]}\n action={{ label: \"Sign in\", href: \"#sign-in\" }}\n />\n</>","MarketingPage":"import { Footer, Hero, MarketingHeader, MarketingPage, Notice } from \"@tonycodes-ui/mortar\";\n\n<MarketingPage\n align=\"center\"\n header={\n <MarketingHeader\n brand=\"Northwind\"\n tagline=\"Scheduling for small teams\"\n homeHref=\"#home\"\n links={[\n { label: \"Pricing\", href: \"#pricing\" },\n { label: \"Docs\", href: \"#docs\" },\n ]}\n action={{ label: \"Sign in\", href: \"#sign-in\" }}\n />\n }\n footer={\n <Footer\n layout=\"inline\"\n brand=\"Northwind\"\n note=\"Built for teams of every size.\"\n copyright=\"© Example company\"\n legal={[\n { label: \"Privacy\", href: \"#privacy\" },\n { label: \"Terms\", href: \"#terms\" },\n ]}\n />\n }\n>\n <Hero\n layout=\"split\"\n wide=\"copy\"\n title=\"Bring every team onto one schedule.\"\n emphasis=\"every team\"\n description=\"Shifts, rooms and bookings in one place, in sync for everyone.\"\n actions={[\n { label: \"Start free\", href: \"#start\" },\n { label: \"Sign in\", href: \"#sign-in\" },\n ]}\n note={\n <Notice title=\"Scheduled maintenance\">\n Sign-in is unavailable on Sunday from 02:00 to 03:00 UTC.\n </Notice>\n }\n >\n <img alt=\"\" src={scenes[0]} />\n </Hero>\n</MarketingPage>","MediaObject":"import { Avatar, MediaObject, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"lg\">\n <MediaObject\n media={<Avatar name=\"Ana Kovač\" />}\n title=\"Ana Kovač\"\n >\n Shipped the new billing flow. Can someone review the copy on the\n confirmation step before Friday?\n </MediaObject>\n <MediaObject\n media={<Avatar name=\"Lindsay Walton\" shape=\"square\" />}\n title=\"Lindsay Walton\"\n align=\"center\"\n reverse\n >\n Reversed and centred for replies on the right.\n </MediaObject>\n</Stack>","MetricGroup":"import { MetricGroup } from \"@tonycodes-ui/mortar\";\n\n<MetricGroup\n label=\"Summary\"\n items={[\n {\n label: \"Requests\",\n value: \"1.42M\",\n change: \"+12.4%\",\n tone: \"success\",\n icon: icons.inbox,\n },\n {\n label: \"Latency\",\n value: \"184ms\",\n change: \"−18ms\",\n tone: \"success\",\n },\n ]}\n/>","MockWindow":"import { MockWindow, Stack, Text } from \"@tonycodes-ui/mortar\";\n\n<MockWindow label=\"Calendar settings\" address=\"app.example.com\">\n <Stack gap=\"sm\">\n <Text weight=\"semibold\">Working hours</Text>\n <Text color=\"muted\">Monday – Friday · 09:00 – 17:00</Text>\n </Stack>\n</MockWindow>","Modal":"import { Button, Input, Modal } from \"@tonycodes-ui/mortar\";\n\n<>\n <Button onClick={() => setOpen(true)}>Open dialog</Button>\n <Modal\n open={open}\n onClose={() => setOpen(false)}\n title=\"Create project\"\n >\n <Input\n label=\"Project name\"\n defaultValue=\"Northwind\"\n hint=\"A name for your workspace\"\n />\n <Button onClick={() => setOpen(false)}>Create project</Button>\n </Modal>\n</>","Navbar":"import { Avatar, Button, Navbar } from \"@tonycodes-ui/mortar\";\n\n<div className=\"m-stack\">\n <Navbar\n brand=\"Northwind\"\n homeHref=\"#home\"\n items={[\n { label: \"Dashboard\", href: \"#dashboard\", current: true },\n { label: \"Team\", href: \"#team\" },\n {\n label: \"Reports\",\n items: [\n {\n label: \"Revenue\",\n href: \"#revenue\",\n description: \"Monthly and yearly totals.\",\n },\n {\n label: \"Usage\",\n href: \"#usage\",\n description: \"Seats and storage by team.\",\n },\n ],\n },\n { label: \"Calendar\", href: \"#calendar\" },\n ]}\n actions={\n <>\n <Button variant=\"secondary\">Invite</Button>\n <Avatar name=\"Ana Kovač\" size=\"sm\" />\n </>\n }\n />\n <Navbar\n tone=\"inverse\"\n label=\"Inverse example\"\n brand=\"Atlas\"\n homeHref=\"#atlas\"\n items={[\n { label: \"Overview\", href: \"#overview\" },\n {\n label: \"Clinics\",\n items: [\n { label: \"North\", href: \"#north\", current: true },\n { label: \"South\", href: \"#south\" },\n ],\n },\n ]}\n actions={<Button variant=\"secondary\">Invite</Button>}\n />\n <Navbar\n tone=\"accent\"\n label=\"Accent example\"\n brand=\"Lumen\"\n homeHref=\"#lumen\"\n items={[\n { label: \"Home\", href: \"#lumen-home\", current: true },\n { label: \"Billing\", href: \"#billing\" },\n ]}\n actions={\n <>\n <Button variant=\"secondary\">Help</Button>\n <Button>Upgrade</Button>\n </>\n }\n />\n</div>","NetworkIllustration":"import { NetworkIllustration, Text } from \"@tonycodes-ui/mortar\";\n\n<>\n <NetworkIllustration\n label=\"Five connected points\"\n description=\"Web and Mobile connect to a hub, which connects to Store and Mail. The motion is illustrative.\"\n width={480}\n height={260}\n nodes={nodes}\n connections={connections}\n />\n <Text color=\"secondary\" size=\"sm\">\n These two decorative drawings share one pause state.\n </Text>\n <div\n data-network-pair=\"\"\n style={{ display: \"grid\", gridTemplateColumns: \"1fr 1fr\", gap: 16 }}\n >\n <NetworkIllustration\n width={240}\n height={200}\n nodes={ring}\n connections={loop}\n duration={2}\n paused={paused}\n onPausedChange={setPaused}\n />\n <NetworkIllustration\n width={240}\n height={200}\n nodes={ring}\n connections={loop}\n duration={3}\n paused={paused}\n onPausedChange={setPaused}\n />\n </div>\n <div style={{ maxWidth: 240 }}>\n <NetworkIllustration\n motion=\"static\"\n width={240}\n height={200}\n nodes={ring}\n connections={loop}\n />\n </div>\n</>","Newsletter":"import { Newsletter } from \"@tonycodes-ui/mortar\";\n\n<div>\n <Newsletter\n title=\"Product updates, monthly\"\n description=\"No spam.\"\n onSubmit={() => setSelected(true)}\n status={selected ? \"success\" : \"idle\"}\n message=\"Thanks. Check your inbox to confirm.\"\n />\n <Newsletter\n title=\"Get the support playbook\"\n headingLevel={3}\n description=\"Five short lessons, one a day. Unsubscribe any time.\"\n layout=\"center\"\n variant=\"panel\"\n submitLabel=\"Send me the lessons\"\n onSubmit={() => undefined}\n />\n</div>","NotFound":"import { NotFound } from \"@tonycodes-ui/mortar\";\n\n<>\n <NotFound\n title=\"This page isn't deployed.\"\n description=\"Check the URL or head back home.\"\n actions={[{ label: \"Go home\", href: \"/\" }, action]}\n illustration={\n <svg\n viewBox=\"0 0 120 80\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"3\"\n strokeLinecap=\"round\"\n >\n <path d=\"M20 60h80M30 60V30l30-18 30 18v30M50 60V42h20v18\" />\n <path d=\"M88 14l14 14M102 14L88 28\" />\n </svg>\n }\n />\n <NotFound\n headingLevel={2}\n title=\"This trail doesn't go anywhere.\"\n description=\"The page you're looking for has moved or never existed.\"\n actions={[{ label: \"Back to home\", href: \"/\" }]}\n background={<img alt=\"\" src={scenes[1]} />}\n />\n</>","Notice":"import { Button, Notice, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"md\">\n <Notice title=\"Update available\" tone=\"info\">\n Your project can use the latest release.\n </Notice>\n {noticeShown ? (\n <Notice\n title=\"Payment failed\"\n tone=\"danger\"\n actions={<a href=\"#billing\">Update billing</a>}\n onDismiss={() => setNoticeShown(false)}\n >\n We couldn't charge your card ending 4242.\n </Notice>\n ) : (\n <Button variant=\"secondary\" onClick={() => setNoticeShown(true)}>\n Show payment notice\n </Button>\n )}\n</Stack>","OrderHistory":"import { ActionLink, Button, OrderHistory, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"xl\">\n <OrderHistory orders={orders} />\n <OrderHistory\n headingLevel={3}\n orders={[\n {\n ...orders[0],\n id: \"o3\",\n number: \"WU88191207\",\n href: \"#order-3\",\n actions: (\n <ActionLink\n label=\"View invoice\"\n href=\"#invoice-3\"\n variant=\"secondary\"\n />\n ),\n items: orders[0].items.map((item) => ({\n ...item,\n actions: (\n <>\n <Button variant=\"secondary\">\n Buy again<span className=\"m-sr-only\"> {item.name}</span>\n </Button>\n <ActionLink\n label={`View ${item.name.toLowerCase()}`}\n href={item.href ?? \"#product\"}\n variant=\"ghost\"\n />\n </>\n ),\n })),\n },\n ]}\n />\n <OrderHistory\n headingLevel={3}\n orders={[\n {\n ...orders[1],\n id: \"o4\",\n number: \"WU88191322\",\n date: \"16 October 2026\",\n status: \"Shipped on 17 October 2026\",\n href: \"#order-4\",\n progress: [\n { id: \"placed\", name: \"Order placed\", status: \"complete\" },\n { id: \"processing\", name: \"Processing\", status: \"complete\" },\n { id: \"shipped\", name: \"Shipped\", status: \"current\" },\n { id: \"delivered\", name: \"Delivered\", status: \"upcoming\" },\n ],\n },\n ]}\n />\n</Stack>","OrderSummary":"import { Button, OrderSummary, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"xl\">\n <div className=\"max-w-sm\">\n <OrderSummary\n lines={[\n { label: \"Subtotal\", value: \"£68.00\" },\n { label: \"Shipping\", value: \"£4.95\" },\n { label: \"VAT included\", value: \"£11.33\" },\n ]}\n total={{ label: \"Order total\", value: \"£72.95\" }}\n action={<Button>Checkout</Button>}\n />\n </div>\n <div className=\"max-w-sm\"><OrderSummary\n title=\"Your order\"\n lines={[\n { label: \"Subtotal\", value: \"£28.00\" },\n {\n label: \"Shipping estimate\",\n value: \"£4.95\",\n hint: <a href=\"#shipping\">How shipping is worked out</a>,\n },\n {\n label: \"Tax estimate\",\n value: \"£4.67\",\n hint: \"VAT at 20%, confirmed at checkout\",\n },\n ]}\n total={{ label: \"Order total\", value: \"£32.95\" }}\n action={<Button>Checkout</Button>}\n /></div>\n</Stack>","PageFeedback":"import { PageFeedback } from \"@tonycodes-ui/mortar\";\n\n<PageFeedback\n value={helpful}\n onChange={setHelpful}\n updated=\"Updated 2 Oct 2026\"\n/>","PageHeading":"import { Avatar, Button, PageHeading, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"xl\">\n <PageHeading\n title=\"Projects\"\n description=\"Your team’s active projects.\"\n actions={<Button>New project</Button>}\n />\n <PageHeading\n title=\"Back End Developer\"\n headingLevel={2}\n avatar={<Avatar name=\"Northwind\" size=\"lg\" shape=\"square\" />}\n meta={[\n { label: \"Full-time\", icon: icons.clock },\n { label: \"Remote\", icon: icons.inbox },\n { label: \"Closes 9 January 2027\", icon: icons.calendar },\n ]}\n actions={\n <>\n <Button variant=\"secondary\">Edit</Button>\n <Button>Publish</Button>\n </>\n }\n />\n</Stack>","PagerLinks":"import { PagerLinks } from \"@tonycodes-ui/mortar\";\n\n<PagerLinks\n previous={{ label: \"Introduction\", href: \"#intro\" }}\n next={{ label: \"Project structure\", href: \"#structure\" }}\n/>","Pagination":"import { Pagination, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"xl\">\n <Pagination page={page} pageCount={5} onChange={setPage} />\n <Pagination\n label=\"Results pages\"\n numbered\n page={resultsPage}\n pageCount={12}\n onChange={setResultsPage}\n summary={{\n from: (resultsPage - 1) * 10 + 1,\n to: Math.min(resultsPage * 10, 114),\n total: 114,\n }}\n />\n</Stack>","PasswordInput":"import { PasswordInput, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"xl\" className=\"max-w-sm\">\n <PasswordInput\n label=\"Password\"\n value={password}\n onChange={(e) => setPassword(e.target.value)}\n />\n <PasswordInput\n label=\"New password\"\n purpose=\"new\"\n required\n value={created}\n onChange={(e) => setCreated(e.target.value)}\n requirements={passwordRules(created)}\n strength={passwordStrength(created)}\n />\n</Stack>","PlanComparison":"import { PlanComparison } from \"@tonycodes-ui/mortar\";\n\n<PlanComparison\n title=\"Compare plans\"\n plans={[\"Hobby\", \"Team\", \"Enterprise\"]}\n featuredPlan=\"Team\"\n groups={[\n {\n label: \"Builds\",\n rows: [\n { feature: \"Concurrent builds\", values: [\"1\", \"4\", \"Custom\"] },\n { feature: \"Preview comments\", values: [false, true, true] },\n ],\n },\n ]}\n/>","PostList":"import { PostList } from \"@tonycodes-ui/mortar\";\n\n<div>\n <PostList\n title=\"From the blog\"\n action={action}\n posts={[\n {\n href: \"#post\",\n title: \"Example post title\",\n excerpt: \"Illustrative excerpt.\",\n date: \"2026-10-02\",\n dateLabel: \"2 Oct 2026\",\n category: \"Engineering\",\n },\n ]}\n />\n <PostList\n title=\"Latest stories\"\n headingLevel={3}\n posts={[\n {\n href: \"#featured-post\",\n title: \"How a bike shop answers every booking the same day\",\n excerpt:\n \"Harbour Bikes moved phone, email and chat into one inbox. Here is what changed in their first month.\",\n date: \"2026-10-12\",\n dateLabel: \"12 Oct 2026\",\n category: \"Customers\",\n featured: true,\n image: <img alt=\"\" src={scene(800, 500, \"bcd7f0\", \"4f7d5c\")} />,\n },\n {\n href: \"#post-2\",\n title: \"Designing a calmer notification inbox\",\n excerpt: \"Fewer pings, clearer priorities.\",\n date: \"2026-10-05\",\n dateLabel: \"5 Oct 2026\",\n category: \"Design\",\n image: <img alt=\"\" src={scene(800, 500, \"f6d8c4\", \"b0654a\")} />,\n },\n {\n href: \"#post-3\",\n title: \"What we learned from 1,000 support teams\",\n excerpt: \"Patterns from a year of anonymised data.\",\n date: \"2026-09-28\",\n dateLabel: \"28 Sep 2026\",\n category: \"Research\",\n image: <img alt=\"\" src={scene(800, 500, \"dcd3f2\", \"5a4c8f\")} />,\n },\n ]}\n />\n</div>","PreviewFrame":"import { PreviewFrame } from \"@tonycodes-ui/mortar\";\n\n<PreviewFrame label=\"Isolated example\" src=\"about:blank\" />","Pricing":"import { Pricing } from \"@tonycodes-ui/mortar\";\n\n<>\n <Pricing\n title=\"Example plans\"\n description=\"Illustrative pricing, not a purchase.\"\n plans={[\n {\n id: \"basic\",\n name: \"Basic\",\n description: \"Personal projects\",\n monthly: \"$0\",\n annual: \"$0\",\n unit: \"/month\",\n annualUnit: \"/year\",\n features: [\"One project\"],\n action,\n },\n {\n id: \"team\",\n name: \"Team\",\n description: \"Small teams\",\n monthly: \"$20\",\n annual: \"$16\",\n unit: \"/month\",\n annualUnit: \"/year\",\n features: [\"Unlimited projects\"],\n action,\n featured: true,\n },\n ]}\n />\n <Pricing\n title=\"One price, everything included\"\n description=\"A single plan with no tiers to compare.\"\n layout=\"detailed\"\n plans={[\n {\n id: \"lifetime\",\n name: \"Lifetime membership\",\n description: \"Pay once and keep every update.\",\n monthly: \"$349\",\n unit: \"One-time payment, USD\",\n features: [\n \"Private forum access\",\n \"Member resources\",\n \"Entry to annual conference\",\n \"Official member t-shirt\",\n ],\n action: { label: \"Get access\", href: \"#access\" },\n },\n ]}\n />\n <Pricing\n title=\"A plan for every stage\"\n description=\"Four tiers, with a discount for non-profits.\"\n plans={[\n [\"hobby\", \"Hobby\", \"Side projects\", \"$0\"],\n [\"starter\", \"Starter\", \"Solo founders\", \"$12\"],\n [\"growth\", \"Growth\", \"Growing teams\", \"$39\"],\n [\"scale\", \"Scale\", \"Large organisations\", \"$99\"],\n ].map(([id, name, description, monthly]) => ({\n id,\n name,\n description,\n monthly,\n unit: \"/month\",\n features: [\"Unlimited projects\", \"Email support\"],\n action,\n }))}\n extra={{\n name: \"Non-profit\",\n description:\n \"Every Growth feature at a reduced price for registered charities.\",\n price: \"$19\",\n unit: \"/month\",\n action: { label: \"Apply for the discount\", href: \"#nonprofit\" },\n }}\n />\n</>","ProcessSteps":"import { ProcessSteps } from \"@tonycodes-ui/mortar\";\n\n<ProcessSteps\n title=\"How it works\"\n description=\"Live in under five minutes.\"\n items={[\n { title: \"Sign up\", description: \"Create an account.\" },\n { title: \"Configure\", description: \"Set tone and colours.\" },\n { title: \"Train\", description: \"Add documents and pages.\" },\n { title: \"Go live\", description: \"Paste one script tag.\" },\n ]}\n/>","ProductFilters":"import { ProductFilters } from \"@tonycodes-ui/mortar\";\n\n<div className=\"max-w-xs\">\n <ProductFilters\n facets={facets}\n selected={filters}\n onChange={(next) => setFilters(next)}\n />\n <output aria-label=\"Applied filters\">\n {Object.entries(filters)\n .filter(([, values]) => values.length)\n .map(([facet, values]) => `${facet}: ${values.join(\", \")}`)\n .join(\"; \") || \"none\"}\n </output>\n</div>","ProductList":"import { Button, ProductList, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"xl\">\n <ProductList label=\"New arrivals\" products={products} />\n <ProductList\n label=\"Bags and kitchen\"\n variant=\"cards\"\n columns={3}\n products={[\n {\n ...products[0],\n id: \"tote-card\",\n meta: undefined,\n badge: undefined,\n description:\n \"Heavy organic canvas with an inside pocket and leather handles.\",\n swatches: [\n { label: \"Natural\", swatch: \"#d9c9a8\" },\n { label: \"Black\", swatch: \"#26262a\" },\n ],\n action: (\n <Button variant=\"secondary\">\n Add to bag<span className=\"m-sr-only\"> Canvas tote</span>\n </Button>\n ),\n },\n {\n ...products[1],\n id: \"mug-card\",\n meta: undefined,\n description: \"Hand-glazed stoneware that keeps coffee warm.\",\n swatches: [\n { label: \"Sage\", swatch: \"#9fb5a0\" },\n { label: \"Chalk\", swatch: \"#f1efe9\" },\n ],\n action: (\n <Button variant=\"secondary\">\n Add to bag<span className=\"m-sr-only\"> Stoneware mug</span>\n </Button>\n ),\n },\n {\n ...products[2],\n id: \"tee-card\",\n meta: undefined,\n description: \"Midweight organic cotton with a relaxed fit.\",\n swatches: [{ label: \"Charcoal\", swatch: \"#3d3f45\" }],\n action: (\n <Button variant=\"secondary\">\n Add to bag<span className=\"m-sr-only\"> Organic tee</span>\n </Button>\n ),\n },\n ]}\n />\n <ProductList\n label=\"Kitchen and travel\"\n variant=\"overlay\"\n columns={3}\n products={relatedProducts.slice(0, 3)}\n />\n</Stack>","ProductOverview":"import { Divider, ProductOverview } from \"@tonycodes-ui/mortar\";\n\n<>\n <ProductOverview\n name=\"Canvas tote\"\n price=\"£32\"\n description=\"Heavy organic cotton canvas with vegetable-tanned leather handles and an inside pocket.\"\n images={selected.colour === \"black\" ? blackToteImages : toteImages}\n rating={{ value: 4.5, count: 112, href: \"#reviews\" }}\n options={[\n {\n id: \"colour\",\n label: \"Colour\",\n values: [\n { value: \"natural\", label: \"Natural\", swatch: \"#d9c9a8\" },\n { value: \"black\", label: \"Black\", swatch: \"#26262a\" },\n ],\n },\n {\n id: \"size\",\n label: \"Size\",\n values: [\n { value: \"small\", label: \"Small\" },\n { value: \"large\", label: \"Large\" },\n { value: \"travel\", label: \"Travel\", disabled: true },\n ],\n },\n ]}\n selected={selected}\n onSelect={(option, value) =>\n setSelected((current) => ({ ...current, [option]: value }))\n }\n onAdd={() => setAdded((n) => n + 1)}\n details={[\n \"Holds a 16-inch laptop\",\n \"Machine washable\",\n \"Made in Portugal\",\n ]}\n />\n <output aria-label=\"Bag\">\n {added} added · {selected.colour} · {selected.size}\n </output>\n <Divider />\n <ProductOverview\n name=\"Stoneware mug\"\n headingLevel={2}\n price=\"£18\"\n gallery=\"grid\"\n description=\"Hand-glazed stoneware, shown from every side at once.\"\n images={[\n { src: mug(\"9fb5a0\"), alt: \"Sage stoneware mug, front\" },\n { src: mug(\"b8c7b0\"), alt: \"Sage stoneware mug, in daylight\" },\n { src: mug(\"7e9480\"), alt: \"Sage stoneware mug, in shade\" },\n ]}\n addLabel=\"Add mug\"\n onAdd={() => setAdded((n) => n + 1)}\n />\n</>","ProductQuickView":"import { Button, ProductQuickView } from \"@tonycodes-ui/mortar\";\n\n<>\n <Button variant=\"secondary\" onClick={() => setQuick(true)}>\n Quick view\n </Button>\n <ProductQuickView\n open={quick}\n onClose={() => setQuick(false)}\n href=\"#tote\"\n name=\"Canvas tote\"\n price=\"£32\"\n description=\"Heavy organic cotton canvas with leather handles.\"\n images={toteImages}\n rating={{ value: 4.5, count: 112 }}\n options={[\n {\n id: \"size\",\n label: \"Size\",\n values: [\n { value: \"small\", label: \"Small\" },\n { value: \"large\", label: \"Large\" },\n ],\n },\n ]}\n selected={{ size: selected.size }}\n onSelect={(option, value) =>\n setSelected((current) => ({ ...current, [option]: value }))\n }\n onAdd={() => setQuick(false)}\n />\n</>","ProductReviews":"import { Button, ProductReviews, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"xl\">\n <ProductReviews\n average={4.4}\n count={112}\n distribution={[\n { stars: 5, count: 70 },\n { stars: 4, count: 30 },\n { stars: 3, count: 8 },\n { stars: 2, count: 3 },\n { stars: 1, count: 1 },\n ]}\n reviews={reviews}\n action={<Button variant=\"secondary\">Write a review</Button>}\n />\n <ProductReviews\n title=\"Mug reviews\"\n avatars\n average={4.7}\n count={38}\n distribution={[\n { stars: 5, count: 29 },\n { stars: 4, count: 7 },\n { stars: 3, count: 2 },\n { stars: 2, count: 0 },\n { stars: 1, count: 0 },\n ]}\n reviews={[\n {\n id: \"m1\",\n author: \"Lindsay Walton\",\n rating: 5,\n date: \"4 October 2026\",\n title: \"My morning favourite\",\n body: \"The glaze is lovely and it keeps coffee warm for ages.\",\n },\n {\n id: \"m2\",\n author: \"Courtney Henry\",\n rating: 4,\n date: \"21 September 2026\",\n title: \"Heavier than expected\",\n body: \"Beautiful mug, though it is quite weighty when full.\",\n },\n ]}\n action={<Button variant=\"secondary\">Review the mug</Button>}\n />\n</Stack>","ProgressBar":"import { ProgressBar, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"lg\">\n <ProgressBar\n label=\"Build minutes\"\n value={4120}\n max={6000}\n valueLabel=\"4,120 / 6,000\"\n />\n <ProgressBar\n label=\"Storage\"\n value={92}\n valueLabel=\"92%\"\n tone=\"warning\"\n />\n</Stack>","ProgressSteps":"import { ProgressSteps, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"xl\">\n <ProgressSteps\n label=\"Job application\"\n steps={[\n {\n id: \"details\",\n name: \"Job details\",\n href: \"#details\",\n status: \"complete\",\n },\n { id: \"form\", name: \"Application form\", status: \"current\" },\n { id: \"preview\", name: \"Preview\", status: \"upcoming\" },\n ]}\n />\n <div className=\"max-w-md\">\n <ProgressSteps\n label=\"Account setup\"\n variant=\"circles\"\n steps={[\n {\n id: \"account\",\n name: \"Create account\",\n description: \"Vitae sed mi luctus laoreet.\",\n href: \"#account\",\n status: \"complete\",\n },\n {\n id: \"profile\",\n name: \"Profile information\",\n description: \"Cursus semper viverra facilisis et et.\",\n status: \"current\",\n },\n {\n id: \"business\",\n name: \"Business information\",\n description: \"Penatibus eu quis ante.\",\n status: \"upcoming\",\n },\n ]}\n />\n </div>\n <ProgressSteps\n label=\"Checkout\"\n variant=\"bullets\"\n steps={[\n {\n id: \"cart\",\n name: \"Cart\",\n href: \"#cart\",\n status: \"complete\",\n },\n { id: \"shipping\", name: \"Shipping\", status: \"current\" },\n { id: \"payment\", name: \"Payment\", status: \"upcoming\" },\n { id: \"review\", name: \"Review\", status: \"upcoming\" },\n ]}\n />\n <ProgressSteps\n label=\"Order WU88191322 progress\"\n variant=\"bar\"\n navigation={false}\n steps={[\n { id: \"placed\", name: \"Order placed\", status: \"complete\" },\n { id: \"processing\", name: \"Processing\", status: \"complete\" },\n { id: \"shipped\", name: \"Shipped\", status: \"current\" },\n { id: \"delivered\", name: \"Delivered\", status: \"upcoming\" },\n ]}\n />\n</Stack>","Prose":"import { Prose } from \"@tonycodes-ui/mortar\";\n\n<Prose>\n <h2>Build cache</h2>\n <p>\n Caches <code>node_modules</code> between builds.\n </p>\n</Prose>","ProviderButtons":"import { Divider, ProviderButtons, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"xl\" className=\"max-w-sm\">\n <ProviderButtons\n label=\"Sign in with\"\n providers={[\n {\n id: \"github\",\n label: \"Continue with GitHub\",\n icon: authIcons.code,\n onSelect: () => setSelected(\"github\"),\n },\n {\n id: \"google\",\n label: \"Continue with Google\",\n icon: authIcons.globe,\n onSelect: () => setSelected(\"google\"),\n },\n ]}\n />\n <Divider label=\"or continue with\" soft spacing=\"none\" />\n <ProviderButtons\n layout=\"grid\"\n providers={[\n {\n id: \"github\",\n label: \"GitHub\",\n icon: authIcons.code,\n onSelect: () => setSelected(\"github\"),\n },\n {\n id: \"sso\",\n label: \"SSO\",\n icon: authIcons.key,\n onSelect: () => setSelected(\"sso\"),\n },\n ]}\n />\n <output aria-label=\"Chosen provider\">{selected}</output>\n</Stack>","RadioGroup":"import { RadioGroup, Stack } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"xl\">\n <RadioGroup\n label=\"Plan\"\n name=\"plan\"\n value={value}\n onChange={setValue}\n options={[\n {\n value: \"first\",\n label: \"Standard\",\n description: \"For small teams\",\n },\n {\n value: \"second\",\n label: \"Advanced\",\n description: \"For growing teams\",\n },\n ]}\n />\n <RadioGroup\n label=\"Memory\"\n name=\"memory\"\n layout=\"grid\"\n value={memory}\n onChange={setMemory}\n options={[\n { value: \"8\", label: \"8 GB\", description: \"£0\" },\n { value: \"16\", label: \"16 GB\", description: \"+ £200\" },\n { value: \"32\", label: \"32 GB\", description: \"+ £400\" },\n {\n value: \"64\",\n label: \"64 GB\",\n description: \"Out of stock\",\n disabled: true,\n },\n ]}\n />\n <RadioGroup\n label=\"Colour\"\n name=\"colour\"\n layout=\"swatches\"\n value={colour}\n onChange={setColour}\n options={[\n { value: \"rose\", label: \"Rose\", swatch: \"#e8a3b4\" },\n { value: \"sky\", label: \"Sky\", swatch: \"#8bbcdc\" },\n { value: \"slate\", label: \"Slate\", swatch: \"#475569\" },\n ]}\n />\n <output aria-label=\"Chosen options\">\n {memory} · {colour}\n </output>\n</Stack>","Release":"import { Release } from \"@tonycodes-ui/mortar\";\n\n<Release\n version=\"v3.2.0\"\n date=\"2026-10-02\"\n dateLabel=\"2 Oct 2026\"\n changes={[\n { type: \"added\", items: [\"Password-protected previews.\"] },\n { type: \"deprecated\", items: [\"The --prod flag.\"] },\n ]}\n/>","SaveBar":"import { SaveBar } from \"@tonycodes-ui/mortar\";\n\n<SaveBar\n open={dirty}\n onSave={() => setDirty(false)}\n onDiscard={() => setDirty(false)}\n/>","SearchDialog":"import { SearchDialog, SearchTrigger } from \"@tonycodes-ui/mortar\";\n\n<>\n <SearchTrigger onOpen={() => setOpen(true)} />\n <SearchDialog\n open={open}\n onClose={() => setOpen(false)}\n query={query}\n onQueryChange={setQuery}\n groups={groups}\n />\n</>","SearchTrigger":"import { SearchDialog, SearchTrigger } from \"@tonycodes-ui/mortar\";\n\n<>\n <SearchTrigger onOpen={() => setOpen(true)} />\n <SearchDialog\n open={open}\n onClose={() => setOpen(false)}\n query={query}\n onQueryChange={setQuery}\n groups={groups}\n />\n</>","SectionHeading":"import { Button, SectionHeading, Stack, TabNav } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"xl\">\n <SectionHeading\n title=\"Job postings\"\n description=\"Open roles across your teams.\"\n actions={\n <>\n <Button variant=\"secondary\">Share</Button>\n <Button>Create posting</Button>\n </>\n }\n />\n <SectionHeading\n title=\"Recent activity\"\n headingLevel={3}\n divider={false}\n />\n <SectionHeading\n title=\"Candidates\"\n actions={<Button>Add candidate</Button>}\n tabs={\n <TabNav\n label=\"Candidate stages\"\n items={[\n { label: \"Applied\", href: \"#applied\" },\n {\n label: \"Phone screening\",\n href: \"#screening\",\n current: true,\n },\n { label: \"Interview\", href: \"#interview\" },\n { label: \"Offer\", href: \"#offer\" },\n { label: \"Hired\", href: \"#hired\" },\n ]}\n />\n }\n />\n</Stack>","Section":"import { ActionLink, CheckList, Section, Stack } from \"@tonycodes-ui/mortar\";\n\n<>\n <Section\n eyebrow=\"Muted band\"\n title=\"Sections alternate rhythm\"\n description=\"Use tones to separate consecutive sections.\"\n tone=\"muted\"\n >\n <CheckList items={[\"No wrapper markup\", \"No page overflow\"]} />\n </Section>\n <Section\n title=\"Inverse band\"\n description=\"Tokens flip locally, so components stay legible.\"\n tone=\"inverse\"\n align=\"center\"\n >\n <Stack direction=\"row\" justify=\"center\">\n <ActionLink label=\"Explore\" href=\"#example\" />\n <CheckList items={[\"Included feature\"]} />\n </Stack>\n </Section>\n</>","SegmentedControl":"import { SegmentedControl } from \"@tonycodes-ui/mortar\";\n\n<SegmentedControl\n label=\"View\"\n value={value}\n onChange={setValue}\n options={[\n { value: \"first\", label: \"Overview\" },\n { value: \"second\", label: \"Activity\" },\n ]}\n/>","Select":"import { Select } from \"@tonycodes-ui/mortar\";\n\n<>\n <Select\n label=\"Environment\"\n value={value}\n onChange={(e) => setValue(e.target.value)}\n options={[\n { value: \"first\", label: \"Production\" },\n { value: \"second\", label: \"Preview\" },\n ]}\n />\n <Select\n label=\"Unavailable environment\"\n disabled\n defaultValue=\"production\"\n hint=\"Your current environment is managed centrally.\"\n options={[{ value: \"production\", label: \"Production\" }]}\n />\n <Select\n label=\"Required environment\"\n defaultValue=\"\"\n error=\"Choose an environment.\"\n options={[\n { value: \"\", label: \"Choose an environment\" },\n { value: \"production\", label: \"Production\" },\n ]}\n />\n</>","SettingsSection":"import { Button, Input, SettingsSection } from \"@tonycodes-ui/mortar\";\n\n<SettingsSection\n title=\"General\"\n description=\"Manage project details.\"\n>\n <Input\n label=\"Project name\"\n defaultValue=\"Northwind\"\n hint=\"A name for your workspace\"\n />\n <Button>Save changes</Button>\n</SettingsSection>","ShoppingCart":"import { ActionLink, Button, Divider, OrderSummary, ShoppingCart } from \"@tonycodes-ui/mortar\";\n\n<>\n <ShoppingCart\n items={items}\n onQuantityChange={(id, quantity) =>\n setItems((current) =>\n current.map((item) =>\n item.id === id ? { ...item, quantity } : item,\n ),\n )\n }\n onRemove={(id) =>\n setItems((current) => current.filter((item) => item.id !== id))\n }\n empty={{\n title: \"Your bag is empty\",\n description: \"Items you add will appear here.\",\n action: <ActionLink label=\"Continue shopping\" href=\"#shop\" />,\n }}\n />\n <output aria-label=\"Bag count\">\n {items.reduce((n, item) => n + item.quantity, 0)}\n </output>\n <Divider />\n <ShoppingCart\n label=\"Items in your saved bag\"\n items={extended}\n onQuantityChange={(id, quantity) =>\n setExtended((current) =>\n current.map((item) =>\n item.id === id ? { ...item, quantity } : item,\n ),\n )\n }\n onRemove={(id) =>\n setExtended((current) => current.filter((item) => item.id !== id))\n }\n summary=<OrderSummary\n title=\"Your order\"\n lines={[\n { label: \"Subtotal\", value: \"£28.00\" },\n {\n label: \"Shipping estimate\",\n value: \"£4.95\",\n hint: <a href=\"#shipping\">How shipping is worked out</a>,\n },\n {\n label: \"Tax estimate\",\n value: \"£4.67\",\n hint: \"VAT at 20%, confirmed at checkout\",\n },\n ]}\n total={{ label: \"Order total\", value: \"£32.95\" }}\n action={<Button>Checkout</Button>}\n />\n related={{\n title: \"You may also like\",\n products: relatedProducts,\n }}\n />\n</>","Sidebar":"import { Avatar, Sidebar } from \"@tonycodes-ui/mortar\";\n\n<div className=\"max-w-xs\">\n <Sidebar\n brand=\"Northwind\"\n workspace=\"Acme workspace\"\n homeHref=\"#home\"\n navigation={[\n {\n label: \"Dashboard\",\n href: \"#dashboard\",\n current: true,\n icon: icons.home,\n },\n { label: \"Team\", href: \"#team\", icon: icons.team },\n {\n label: \"Reports\",\n href: \"#reports\",\n icon: icons.calendar,\n children: [\n { label: \"Revenue\", href: \"#revenue\" },\n { label: \"Retention\", href: \"#retention\" },\n ],\n },\n {\n label: \"Projects\",\n href: \"#projects\",\n count: \"12\",\n icon: icons.folder,\n },\n { label: \"Calendar\", href: \"#calendar\", icon: icons.calendar },\n ]}\n sections={[\n {\n label: \"Your teams\",\n items: [\n { label: \"Engineering\", href: \"#engineering\" },\n { label: \"Design\", href: \"#design\" },\n ],\n },\n ]}\n footer={<Avatar name=\"Ana Kovač\" size=\"sm\" />}\n />\n</div>","SignInPanel":"import { SignInPanel, Stack, Text } from \"@tonycodes-ui/mortar\";\n\n<SignInPanel\n title=\"Sign in\"\n description=\"Use your work account to continue.\"\n providers={[\n {\n id: \"github\",\n label: \"Continue with GitHub\",\n onSelect: () => setSelected(true),\n },\n ]}\n email={{ onSubmit: setSubmitted }}\n footer=\"By continuing you agree to the terms of service.\"\n aside={\n <Stack gap=\"md\">\n <Text size=\"lg\" weight=\"medium\">\n “We answered twice as many customers in the first month.”\n </Text>\n <Text color=\"muted\" size=\"sm\">\n Lindsay Walton, Wheelhouse Bikes\n </Text>\n </Stack>\n }\n/>","SlideOver":"import { Button, Input, SlideOver } from \"@tonycodes-ui/mortar\";\n\n<>\n {trigger(\"Add variable\")}\n <SlideOver\n open={open}\n onClose={() => setOpen(false)}\n title=\"Add environment variable\"\n description=\"Applies to the next deployment.\"\n size=\"lg\"\n actions={\n <>\n <Button variant=\"secondary\" onClick={() => setOpen(false)}>\n Cancel\n </Button>\n <Button onClick={() => setOpen(false)}>\n Save variable\n </Button>\n </>\n }\n >\n <Input label=\"Key\" defaultValue=\"API_KEY\" />\n </SlideOver>\n</>","Stack":"import { Button, Stack, Text } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"lg\">\n <Stack direction=\"row\" gap=\"sm\" wrap>\n <Button>Primary</Button>\n <Button variant=\"secondary\">Secondary</Button>\n </Stack>\n <Stack gap=\"xs\">\n <Text weight=\"semibold\">Compact group</Text>\n <Text color=\"muted\">Related lines sit close together.</Text>\n </Stack>\n</Stack>","StackedList":"import { Avatar, Badge, Stack, StackedList } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"xl\">\n <StackedList\n title=\"Members\"\n action={<a href=\"#manage\">Manage</a>}\n items={[\n {\n id: \"1\",\n title: \"Ana Kovač\",\n description: \"ana@example.com\",\n leading: <Avatar name=\"Ana Kovač\" decorative />,\n trailing: <Badge>Owner</Badge>,\n },\n ]}\n />\n <StackedList\n label=\"Recent files\"\n action={<a href=\"#files\">View all files</a>}\n items={[\n {\n id: \"brief\",\n title: \"Launch brief.pdf\",\n description: \"Updated 2 hours ago\",\n href: \"#brief\",\n },\n ]}\n />\n <StackedList\n label=\"Directory\"\n groups={[\n {\n label: \"A\",\n items: [\n {\n id: \"ana\",\n title: \"Ana Kovač\",\n description: \"Engineering\",\n leading: (\n <Avatar name=\"Ana Kovač\" size=\"sm\" decorative />\n ),\n },\n {\n id: \"arlene\",\n title: \"Arlene Mccoy\",\n description: \"Design\",\n leading: (\n <Avatar name=\"Arlene Mccoy\" size=\"sm\" decorative />\n ),\n },\n ],\n },\n {\n label: \"T\",\n items: [\n {\n id: \"tom\",\n title: \"Tom Cook\",\n description: \"Design\",\n leading: <Avatar name=\"Tom Cook\" size=\"sm\" decorative />,\n },\n {\n id: \"tanya\",\n title: \"Tanya Fox\",\n description: \"Marketing\",\n leading: (\n <Avatar name=\"Tanya Fox\" size=\"sm\" decorative />\n ),\n },\n ],\n },\n ]}\n />\n <StackedList\n title=\"People\"\n chevrons\n items={[\n {\n id: \"leslie\",\n title: \"Leslie Alexander\",\n description: \"leslie.alexander@example.com\",\n leading: <Avatar name=\"Leslie Alexander\" decorative />,\n meta: (\n <>\n <span>Co-founder / CEO</span>\n <span>Last seen 3h ago</span>\n </>\n ),\n href: \"#leslie\",\n },\n {\n id: \"michael\",\n title: \"Michael Foster\",\n description: \"michael.foster@example.com\",\n leading: <Avatar name=\"Michael Foster\" decorative />,\n meta: (\n <>\n <span>Co-founder / CTO</span>\n <span>Online</span>\n </>\n ),\n href: \"#michael\",\n },\n ]}\n />\n</Stack>","StackedShell":"import { Avatar, MetricGroup, PageHeading, StackedShell } from \"@tonycodes-ui/mortar\";\n\n<StackedShell\n brand=\"Northwind\"\n homeHref=\"#home\"\n navigation={[\n { label: \"Dashboard\", href: \"#dashboard\", current: true },\n { label: \"Team\", href: \"#team\" },\n {\n label: \"Projects\",\n items: [\n { label: \"Website relaunch\", href: \"#relaunch\" },\n { label: \"Mobile app\", href: \"#mobile\" },\n ],\n },\n { label: \"Calendar\", href: \"#calendar\" },\n ]}\n tabs={{\n label: \"Dashboard sections\",\n items: [\n { label: \"Overview\", href: \"#overview\", current: true },\n { label: \"Deploys\", href: \"#deploys\", count: 48 },\n { label: \"Incidents\", href: \"#incidents\" },\n ],\n }}\n actions={<Avatar name=\"Ana Kovač\" size=\"sm\" />}\n header={\n <PageHeading\n title=\"Dashboard\"\n description=\"What changed across your projects this week.\"\n />\n }\n>\n <MetricGroup\n label=\"This week\"\n items={[\n { label: \"Deploys\", value: \"48\", change: \"+6\", tone: \"success\" },\n { label: \"Incidents\", value: \"1\", change: \"−2\", tone: \"success\" },\n ]}\n />\n</StackedShell>","StatGroup":"import { Stack, StatGroup } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"xl\">\n <StatGroup\n label=\"Platform numbers\"\n items={[\n { value: \"99.99%\", label: \"Uptime\" },\n { value: \"41s\", label: \"Median build\" },\n ]}\n />\n <StatGroup\n label=\"Support numbers\"\n items={[\n {\n value: \"4 min\",\n label: \"First response\",\n description: \"Median across every channel last quarter.\",\n },\n {\n value: \"92%\",\n label: \"Solved on first reply\",\n description: \"Customers rarely need to ask twice.\",\n },\n {\n value: \"24/7\",\n label: \"Coverage\",\n description: \"Follow-the-sun teams in three time zones.\",\n },\n ]}\n />\n <StatGroup\n label=\"Company numbers\"\n background={<img alt=\"\" src={scenes[0]} />}\n items={[\n { value: \"8,000+\", label: \"Creators on the platform\" },\n { value: \"3%\", label: \"Flat platform fee\" },\n { value: \"99.9%\", label: \"Uptime guarantee\" },\n { value: \"$70M\", label: \"Paid out to creators\" },\n ]}\n />\n <StatGroup\n label=\"Company milestones\"\n layout=\"timeline\"\n items={[\n {\n value: \"Aug 2021\",\n label: \"Founded company\",\n description: \"Two engineers and a shared design system.\",\n },\n {\n value: \"Dec 2021\",\n label: \"Secured funding\",\n description: \"A seed round to grow the team.\",\n },\n {\n value: \"Feb 2022\",\n label: \"Released beta\",\n description: \"Forty teams joined in the first month.\",\n },\n {\n value: \"Dec 2022\",\n label: \"Global launch\",\n description: \"Available in every region.\",\n },\n ]}\n />\n <StatGroup\n label=\"Growth\"\n layout=\"stepped\"\n items={[\n {\n value: \"250k\",\n label: \"Users on the platform\",\n description: \"Across 40 countries.\",\n },\n {\n value: \"$8.9B\",\n label: \"Processed every quarter\",\n description: \"With no downtime last year.\",\n },\n {\n value: \"401k\",\n label: \"Projects created\",\n description: \"Most in their first week.\",\n },\n ]}\n />\n</Stack>","Steps":"import { Steps } from \"@tonycodes-ui/mortar\";\n\n<Steps\n items={[\n { title: \"Sign up\", description: \"Create an account.\" },\n { title: \"Configure\", description: \"Choose a theme.\" },\n ]}\n/>","Switch":"import { Stack, Switch } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"sm\">\n <Switch\n label=\"Automatic updates\"\n checked={checked}\n onChange={(e) => setChecked(e.target.checked)}\n />\n <Switch\n label=\"Annual billing\"\n description=\"Save 10% when you pay for a year up front.\"\n checked={extra}\n onChange={(e) => setExtra(e.target.checked)}\n />\n</Stack>","TabNav":"import { Stack, TabNav } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"xl\">\n <TabNav\n label=\"Settings\"\n items={[\n { label: \"General\", href: \"#general\", icon: icons.home },\n { label: \"Billing\", href: \"#billing\", icon: icons.card },\n {\n label: \"Team\",\n href: \"#team\",\n icon: icons.team,\n current: true,\n count: 4,\n },\n { label: \"Projects\", href: \"#projects\", icon: icons.folder },\n ]}\n />\n <TabNav\n label=\"Candidates\"\n variant=\"pills\"\n items={[\n { label: \"Applied\", href: \"#applied\", count: 52 },\n {\n label: \"Phone screening\",\n href: \"#screening\",\n count: 6,\n current: true,\n },\n { label: \"Interview\", href: \"#interview\", count: 4 },\n { label: \"Offer\", href: \"#offer\" },\n ]}\n />\n <TabNav\n label=\"Account\"\n fullWidth\n items={[\n { label: \"My account\", href: \"#account\", current: true },\n { label: \"Company\", href: \"#company\" },\n { label: \"Team members\", href: \"#members\" },\n ]}\n />\n</Stack>","Table":"import { Stack, Table } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"xl\">\n <Table\n caption=\"Plan limits\"\n captionVisible\n columns={[\n { key: \"plan\", label: \"Plan\" },\n { key: \"conversations\", label: \"Conversations\", align: \"end\" },\n { key: \"support\", label: \"Support\" },\n ]}\n rows={[\n { plan: \"Insider\", conversations: \"100\", support: \"Community\" },\n { plan: \"Starter\", conversations: \"500\", support: \"Email\" },\n { plan: \"Pro\", conversations: \"2,000\", support: \"Priority\" },\n ]}\n />\n <Table\n caption=\"People by office\"\n columns={[\n { key: \"name\", label: \"Name\" },\n { key: \"title\", label: \"Title\" },\n { key: \"role\", label: \"Role\" },\n ]}\n groups={[\n {\n label: \"Edinburgh\",\n rows: [\n {\n name: \"Lindsay Walton\",\n title: \"Front-end developer\",\n role: \"Member\",\n },\n { name: \"Courtney Henry\", title: \"Designer\", role: \"Admin\" },\n ],\n },\n {\n label: \"London\",\n rows: [\n {\n name: \"Tom Cook\",\n title: \"Director of product\",\n role: \"Admin\",\n },\n {\n name: \"Whitney Francis\",\n title: \"Copywriter\",\n role: \"Member\",\n },\n ],\n },\n ]}\n />\n</Stack>","Tabs":"import { Stack, Tabs } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"xl\">\n <Tabs\n label=\"Example tabs\"\n value={value}\n onChange={setValue}\n items={[\n {\n id: \"first\",\n label: \"Overview\",\n content: <p>Overview content</p>,\n },\n {\n id: \"second\",\n label: \"Activity\",\n count: 12,\n icon: icons.clock,\n content: <p>Activity content</p>,\n },\n ]}\n />\n <Tabs\n label=\"Account sections\"\n variant=\"pills\"\n value={section}\n onChange={setSection}\n items={[\n { id: \"profile\", label: \"Profile\", content: <p>Profile form</p> },\n { id: \"billing\", label: \"Billing\", content: <p>Invoices</p> },\n { id: \"team\", label: \"Team\", content: <p>Team members</p> },\n ]}\n />\n <Tabs\n label=\"Billing period\"\n fullWidth\n value={period}\n onChange={setPeriod}\n items={[\n {\n id: \"monthly\",\n label: \"Monthly\",\n content: <p>Billed monthly</p>,\n },\n { id: \"yearly\", label: \"Yearly\", content: <p>Billed yearly</p> },\n ]}\n />\n</Stack>","TeamGrid":"import { TeamGrid } from \"@tonycodes-ui/mortar\";\n\n<div>\n <TeamGrid\n title=\"The people behind the product\"\n members={[\n {\n name: \"Ana Kovač\",\n role: \"Founder\",\n bio: \"Ran support for a bike shop before building Northwind.\",\n links: [\n {\n label: \"Ana Kovač's website\",\n href: \"#ana-web\",\n icon: icons.globe,\n },\n {\n label: \"Ana Kovač on GitHub\",\n href: \"#ana-gh\",\n icon: icons.code,\n },\n ],\n },\n { name: \"Ben Lee\", role: \"Engineering\" },\n ]}\n />\n <TeamGrid\n title=\"Leadership\"\n headingLevel={3}\n layout=\"large\"\n members={[\n {\n name: \"Cy Moreno\",\n role: \"Chief executive\",\n image: <img alt=\"\" src={portrait(\"e9dccb\", \"8a6a4f\")} />,\n },\n {\n name: \"Di Novak\",\n role: \"Chief technology officer\",\n image: <img alt=\"\" src={portrait(\"cfe0e8\", \"3f6577\")} />,\n },\n {\n name: \"Ed Okafor\",\n role: \"Head of design\",\n image: <img alt=\"\" src={portrait(\"e3dcef\", \"5d4b85\")} />,\n },\n ]}\n />\n <TeamGrid\n title=\"Support leads\"\n headingLevel={3}\n layout=\"list\"\n members={[\n {\n name: \"Flo Park\",\n role: \"Support, Europe\",\n bio: \"Leads a team of twelve across three time zones and writes most of our help centre.\",\n image: <img alt=\"\" src={portrait(\"d8e8d0\", \"4d7550\")} />,\n links: [\n {\n label: \"Flo Park on GitHub\",\n href: \"#flo-gh\",\n icon: icons.code,\n },\n ],\n },\n {\n name: \"Gil Ruiz\",\n role: \"Support, Americas\",\n bio: \"Joined from a customer team and still answers tickets every Friday.\",\n image: <img alt=\"\" src={portrait(\"f2dcd6\", \"9a4f45\")} />,\n },\n ]}\n />\n</div>","TestimonialGrid":"import { TestimonialGrid } from \"@tonycodes-ui/mortar\";\n\n<div>\n <TestimonialGrid\n title=\"Teams ship faster\"\n items={[\n {\n quote: \"Illustrative quote for the preview.\",\n name: \"Example customer\",\n role: \"Example role\",\n },\n ]}\n />\n <TestimonialGrid\n title=\"What support teams say\"\n headingLevel={3}\n layout=\"grid\"\n items={[\n {\n quote:\n \"We answered every booking request the same day for the first time. The shared inbox replaced three tools and a spreadsheet.\",\n name: \"Ana Kovač\",\n role: \"Owner, Harbour Bikes\",\n featured: true,\n },\n {\n quote: \"Setup took an afternoon.\",\n name: \"Ben Lee\",\n role: \"Office manager\",\n },\n {\n quote: \"Our clients notice how quickly we reply now.\",\n name: \"Cy Moreno\",\n role: \"Agency lead\",\n },\n {\n quote: \"Scheduling alone saves us hours a week.\",\n name: \"Di Novak\",\n role: \"Clinic director\",\n },\n {\n quote: \"The reports are clear enough to share with the board.\",\n name: \"Ed Okafor\",\n role: \"Operations\",\n },\n ]}\n />\n <TestimonialGrid\n title=\"Masonry with a featured quote\"\n headingLevel={3}\n items={[\n {\n quote:\n \"Northwind is the first support tool the whole team actually opens every morning.\",\n name: \"Flo Park\",\n role: \"Head of support\",\n featured: true,\n },\n {\n quote: \"Short and to the point.\",\n name: \"Gil Ruiz\",\n role: \"Founder\",\n },\n {\n quote:\n \"A longer quote shows how masonry columns keep their own heights instead of stretching to match the tallest card in the row.\",\n name: \"Hana Ito\",\n role: \"Product lead\",\n },\n {\n quote: \"Booking links changed how customers reach us.\",\n name: \"Ivo Petrov\",\n role: \"Studio owner\",\n },\n ]}\n />\n</div>","Testimonial":"import { Avatar, Testimonial } from \"@tonycodes-ui/mortar\";\n\n<>\n <Testimonial\n quote=\"The example shows how a testimonial appears.\"\n name=\"Example customer\"\n role=\"Illustrative content\"\n />\n <Testimonial\n quote=\"We answered twice as many customers in the first month.\"\n name=\"Lindsay Walton\"\n role=\"Owner, Wheelhouse Bikes\"\n logo={\n <img\n alt=\"Wheelhouse Bikes\"\n src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 28'%3E%3Ccircle cx='14' cy='14' r='11' fill='none' stroke='%238e8e93' stroke-width='3'/%3E%3Crect x='32' y='10' width='80' height='8' rx='4' fill='%238e8e93'/%3E%3C/svg%3E\"\n />\n }\n avatar={<Avatar name=\"Lindsay Walton\" />}\n />\n</>","TextArea":"import { TextArea } from \"@tonycodes-ui/mortar\";\n\n<TextArea\n label=\"Description\"\n defaultValue=\"Shared component preview\"\n/>","Text":"import { Stack, Text } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"sm\">\n <Text size=\"lg\" weight=\"semibold\">\n Large semibold\n </Text>\n <Text>Default body copy.</Text>\n <Text color=\"secondary\">Secondary supporting copy.</Text>\n <Text color=\"muted\" size=\"sm\">\n Muted small print.\n </Text>\n</Stack>","ThemeProvider":"import { AppearanceControl, Button, Input, ThemeProvider } from \"@tonycodes-ui/mortar\";\n\n<ThemeProvider brand=\"neutral\" density=\"comfortable\" initialAppearance=\"system\">\n <AppearanceControl />\n <Button>Primary action</Button>\n <Input\n label=\"Project name\"\n defaultValue=\"Northwind\"\n hint=\"A name for your workspace\"\n />\n</ThemeProvider>","Toast":"import { Avatar, Stack, Toast } from \"@tonycodes-ui/mortar\";\n\n<Stack gap=\"md\">\n <Toast\n title=\"Payment method expired\"\n description=\"Update it to keep builds running.\"\n tone=\"danger\"\n action={{ label: \"Update\", onSelect: () => setSelected(true) }}\n />\n <Toast\n title=\"Ana Kovač replied\"\n description=\"“Looks good — ship it on Friday.”\"\n leading={<Avatar name=\"Ana Kovač\" size=\"sm\" />}\n action={{ label: \"Reply\", onSelect: () => {} }}\n secondaryAction={{ label: \"Mark as read\", onSelect: () => {} }}\n />\n</Stack>","Toaster":"import { Button, Toaster } from \"@tonycodes-ui/mortar\";\n\n<>\n <Button\n onClick={() =>\n setToasts((t) => [\n ...t,\n {\n id: String(Date.now()),\n title: \"Copied URL\",\n tone: \"neutral\",\n },\n ])\n }\n >\n Show toast\n </Button>\n <Toaster\n items={toasts}\n onDismiss={(id) => setToasts((t) => t.filter((x) => x.id !== id))}\n />\n</>"},"inherited":{"Button":0,"Checkbox":1,"CodeInput":2,"Input":3,"PasswordInput":4,"Select":5,"Switch":6,"TextArea":7},"inheritedSets":[["about","accessKey","aria-activedescendant","aria-atomic","aria-autocomplete","aria-braillelabel","aria-brailleroledescription","aria-busy","aria-checked","aria-colcount","aria-colindex","aria-colindextext","aria-colspan","aria-controls","aria-current","aria-describedby","aria-description","aria-details","aria-disabled","aria-dropeffect","aria-errormessage","aria-expanded","aria-flowto","aria-grabbed","aria-haspopup","aria-hidden","aria-invalid","aria-keyshortcuts","aria-label","aria-labelledby","aria-level","aria-live","aria-modal","aria-multiline","aria-multiselectable","aria-orientation","aria-owns","aria-placeholder","aria-posinset","aria-pressed","aria-readonly","aria-relevant","aria-required","aria-roledescription","aria-rowcount","aria-rowindex","aria-rowindextext","aria-rowspan","aria-selected","aria-setsize","aria-sort","aria-valuemax","aria-valuemin","aria-valuenow","aria-valuetext","autoCapitalize","autoCorrect","autoFocus","autoSave","children","className","color","content","contentEditable","contextMenu","dangerouslySetInnerHTML","datatype","defaultChecked","defaultValue","dir","disabled","draggable","enterKeyHint","exportparts","form","formAction","formEncType","formMethod","formNoValidate","formTarget","hidden","id","inert","inlist","inputMode","is","itemID","itemProp","itemRef","itemScope","itemType","key","lang","name","nonce","onAbort","onAbortCapture","onAnimationEnd","onAnimationEndCapture","onAnimationIteration","onAnimationIterationCapture","onAnimationStart","onAnimationStartCapture","onAuxClick","onAuxClickCapture","onBeforeInput","onBeforeInputCapture","onBeforeToggle","onBlur","onBlurCapture","onCanPlay","onCanPlayCapture","onCanPlayThrough","onCanPlayThroughCapture","onChange","onChangeCapture","onClick","onClickCapture","onCompositionEnd","onCompositionEndCapture","onCompositionStart","onCompositionStartCapture","onCompositionUpdate","onCompositionUpdateCapture","onContextMenu","onContextMenuCapture","onCopy","onCopyCapture","onCut","onCutCapture","onDoubleClick","onDoubleClickCapture","onDrag","onDragCapture","onDragEnd","onDragEndCapture","onDragEnter","onDragEnterCapture","onDragExit","onDragExitCapture","onDragLeave","onDragLeaveCapture","onDragOver","onDragOverCapture","onDragStart","onDragStartCapture","onDrop","onDropCapture","onDurationChange","onDurationChangeCapture","onEmptied","onEmptiedCapture","onEncrypted","onEncryptedCapture","onEnded","onEndedCapture","onError","onErrorCapture","onFocus","onFocusCapture","onGotPointerCapture","onGotPointerCaptureCapture","onInput","onInputCapture","onInvalid","onInvalidCapture","onKeyDown","onKeyDownCapture","onKeyPress","onKeyPressCapture","onKeyUp","onKeyUpCapture","onLoad","onLoadCapture","onLoadStart","onLoadStartCapture","onLoadedData","onLoadedDataCapture","onLoadedMetadata","onLoadedMetadataCapture","onLostPointerCapture","onLostPointerCaptureCapture","onMouseDown","onMouseDownCapture","onMouseEnter","onMouseLeave","onMouseMove","onMouseMoveCapture","onMouseOut","onMouseOutCapture","onMouseOver","onMouseOverCapture","onMouseUp","onMouseUpCapture","onPaste","onPasteCapture","onPause","onPauseCapture","onPlay","onPlayCapture","onPlaying","onPlayingCapture","onPointerCancel","onPointerCancelCapture","onPointerDown","onPointerDownCapture","onPointerEnter","onPointerLeave","onPointerMove","onPointerMoveCapture","onPointerOut","onPointerOutCapture","onPointerOver","onPointerOverCapture","onPointerUp","onPointerUpCapture","onProgress","onProgressCapture","onRateChange","onRateChangeCapture","onReset","onResetCapture","onScroll","onScrollCapture","onScrollEnd","onScrollEndCapture","onSeeked","onSeekedCapture","onSeeking","onSeekingCapture","onSelect","onSelectCapture","onStalled","onStalledCapture","onSubmit","onSubmitCapture","onSuspend","onSuspendCapture","onTimeUpdate","onTimeUpdateCapture","onToggle","onTouchCancel","onTouchCancelCapture","onTouchEnd","onTouchEndCapture","onTouchMove","onTouchMoveCapture","onTouchStart","onTouchStartCapture","onTransitionCancel","onTransitionCancelCapture","onTransitionEnd","onTransitionEndCapture","onTransitionRun","onTransitionRunCapture","onTransitionStart","onTransitionStartCapture","onVolumeChange","onVolumeChangeCapture","onWaiting","onWaitingCapture","onWheel","onWheelCapture","part","popover","popoverTarget","popoverTargetAction","prefix","property","radioGroup","ref","rel","resource","results","rev","role","security","slot","spellCheck","style","suppressContentEditableWarning","suppressHydrationWarning","tabIndex","title","translate","type","typeof","unselectable","value","vocab"],["about","accept","accessKey","alt","aria-activedescendant","aria-atomic","aria-autocomplete","aria-braillelabel","aria-brailleroledescription","aria-busy","aria-checked","aria-colcount","aria-colindex","aria-colindextext","aria-colspan","aria-controls","aria-current","aria-describedby","aria-description","aria-details","aria-disabled","aria-dropeffect","aria-errormessage","aria-expanded","aria-flowto","aria-grabbed","aria-haspopup","aria-hidden","aria-invalid","aria-keyshortcuts","aria-label","aria-labelledby","aria-level","aria-live","aria-modal","aria-multiline","aria-multiselectable","aria-orientation","aria-owns","aria-placeholder","aria-posinset","aria-pressed","aria-readonly","aria-relevant","aria-required","aria-roledescription","aria-rowcount","aria-rowindex","aria-rowindextext","aria-rowspan","aria-selected","aria-setsize","aria-sort","aria-valuemax","aria-valuemin","aria-valuenow","aria-valuetext","autoCapitalize","autoComplete","autoCorrect","autoFocus","autoSave","capture","checked","children","className","color","content","contentEditable","contextMenu","dangerouslySetInnerHTML","datatype","defaultChecked","defaultValue","dir","disabled","draggable","enterKeyHint","exportparts","form","formAction","formEncType","formMethod","formNoValidate","formTarget","height","hidden","id","inert","inlist","inputMode","is","itemID","itemProp","itemRef","itemScope","itemType","lang","list","max","maxLength","min","minLength","multiple","name","nonce","onAbort","onAbortCapture","onAnimationEnd","onAnimationEndCapture","onAnimationIteration","onAnimationIterationCapture","onAnimationStart","onAnimationStartCapture","onAuxClick","onAuxClickCapture","onBeforeInput","onBeforeInputCapture","onBeforeToggle","onBlur","onBlurCapture","onCanPlay","onCanPlayCapture","onCanPlayThrough","onCanPlayThroughCapture","onChange","onChangeCapture","onClick","onClickCapture","onCompositionEnd","onCompositionEndCapture","onCompositionStart","onCompositionStartCapture","onCompositionUpdate","onCompositionUpdateCapture","onContextMenu","onContextMenuCapture","onCopy","onCopyCapture","onCut","onCutCapture","onDoubleClick","onDoubleClickCapture","onDrag","onDragCapture","onDragEnd","onDragEndCapture","onDragEnter","onDragEnterCapture","onDragExit","onDragExitCapture","onDragLeave","onDragLeaveCapture","onDragOver","onDragOverCapture","onDragStart","onDragStartCapture","onDrop","onDropCapture","onDurationChange","onDurationChangeCapture","onEmptied","onEmptiedCapture","onEncrypted","onEncryptedCapture","onEnded","onEndedCapture","onError","onErrorCapture","onFocus","onFocusCapture","onGotPointerCapture","onGotPointerCaptureCapture","onInput","onInputCapture","onInvalid","onInvalidCapture","onKeyDown","onKeyDownCapture","onKeyPress","onKeyPressCapture","onKeyUp","onKeyUpCapture","onLoad","onLoadCapture","onLoadStart","onLoadStartCapture","onLoadedData","onLoadedDataCapture","onLoadedMetadata","onLoadedMetadataCapture","onLostPointerCapture","onLostPointerCaptureCapture","onMouseDown","onMouseDownCapture","onMouseEnter","onMouseLeave","onMouseMove","onMouseMoveCapture","onMouseOut","onMouseOutCapture","onMouseOver","onMouseOverCapture","onMouseUp","onMouseUpCapture","onPaste","onPasteCapture","onPause","onPauseCapture","onPlay","onPlayCapture","onPlaying","onPlayingCapture","onPointerCancel","onPointerCancelCapture","onPointerDown","onPointerDownCapture","onPointerEnter","onPointerLeave","onPointerMove","onPointerMoveCapture","onPointerOut","onPointerOutCapture","onPointerOver","onPointerOverCapture","onPointerUp","onPointerUpCapture","onProgress","onProgressCapture","onRateChange","onRateChangeCapture","onReset","onResetCapture","onScroll","onScrollCapture","onScrollEnd","onScrollEndCapture","onSeeked","onSeekedCapture","onSeeking","onSeekingCapture","onSelect","onSelectCapture","onStalled","onStalledCapture","onSubmit","onSubmitCapture","onSuspend","onSuspendCapture","onTimeUpdate","onTimeUpdateCapture","onToggle","onTouchCancel","onTouchCancelCapture","onTouchEnd","onTouchEndCapture","onTouchMove","onTouchMoveCapture","onTouchStart","onTouchStartCapture","onTransitionCancel","onTransitionCancelCapture","onTransitionEnd","onTransitionEndCapture","onTransitionRun","onTransitionRunCapture","onTransitionStart","onTransitionStartCapture","onVolumeChange","onVolumeChangeCapture","onWaiting","onWaitingCapture","onWheel","onWheelCapture","part","pattern","placeholder","popover","popoverTarget","popoverTargetAction","prefix","property","radioGroup","readOnly","rel","required","resource","results","rev","role","security","size","slot","spellCheck","src","step","style","suppressContentEditableWarning","suppressHydrationWarning","tabIndex","title","translate","typeof","unselectable","value","vocab","width"],["key","ref"],["about","accept","accessKey","alt","aria-activedescendant","aria-atomic","aria-autocomplete","aria-braillelabel","aria-brailleroledescription","aria-busy","aria-checked","aria-colcount","aria-colindex","aria-colindextext","aria-colspan","aria-controls","aria-current","aria-describedby","aria-description","aria-details","aria-disabled","aria-dropeffect","aria-errormessage","aria-expanded","aria-flowto","aria-grabbed","aria-haspopup","aria-hidden","aria-invalid","aria-keyshortcuts","aria-label","aria-labelledby","aria-level","aria-live","aria-modal","aria-multiline","aria-multiselectable","aria-orientation","aria-owns","aria-placeholder","aria-posinset","aria-pressed","aria-readonly","aria-relevant","aria-required","aria-roledescription","aria-rowcount","aria-rowindex","aria-rowindextext","aria-rowspan","aria-selected","aria-setsize","aria-sort","aria-valuemax","aria-valuemin","aria-valuenow","aria-valuetext","autoCapitalize","autoComplete","autoCorrect","autoFocus","autoSave","capture","checked","children","className","color","content","contentEditable","contextMenu","dangerouslySetInnerHTML","datatype","defaultChecked","defaultValue","dir","disabled","draggable","enterKeyHint","exportparts","form","formAction","formEncType","formMethod","formNoValidate","formTarget","height","hidden","id","inert","inlist","inputMode","is","itemID","itemProp","itemRef","itemScope","itemType","key","lang","list","max","maxLength","min","minLength","multiple","name","nonce","onAbort","onAbortCapture","onAnimationEnd","onAnimationEndCapture","onAnimationIteration","onAnimationIterationCapture","onAnimationStart","onAnimationStartCapture","onAuxClick","onAuxClickCapture","onBeforeInput","onBeforeInputCapture","onBeforeToggle","onBlur","onBlurCapture","onCanPlay","onCanPlayCapture","onCanPlayThrough","onCanPlayThroughCapture","onChange","onChangeCapture","onClick","onClickCapture","onCompositionEnd","onCompositionEndCapture","onCompositionStart","onCompositionStartCapture","onCompositionUpdate","onCompositionUpdateCapture","onContextMenu","onContextMenuCapture","onCopy","onCopyCapture","onCut","onCutCapture","onDoubleClick","onDoubleClickCapture","onDrag","onDragCapture","onDragEnd","onDragEndCapture","onDragEnter","onDragEnterCapture","onDragExit","onDragExitCapture","onDragLeave","onDragLeaveCapture","onDragOver","onDragOverCapture","onDragStart","onDragStartCapture","onDrop","onDropCapture","onDurationChange","onDurationChangeCapture","onEmptied","onEmptiedCapture","onEncrypted","onEncryptedCapture","onEnded","onEndedCapture","onError","onErrorCapture","onFocus","onFocusCapture","onGotPointerCapture","onGotPointerCaptureCapture","onInput","onInputCapture","onInvalid","onInvalidCapture","onKeyDown","onKeyDownCapture","onKeyPress","onKeyPressCapture","onKeyUp","onKeyUpCapture","onLoad","onLoadCapture","onLoadStart","onLoadStartCapture","onLoadedData","onLoadedDataCapture","onLoadedMetadata","onLoadedMetadataCapture","onLostPointerCapture","onLostPointerCaptureCapture","onMouseDown","onMouseDownCapture","onMouseEnter","onMouseLeave","onMouseMove","onMouseMoveCapture","onMouseOut","onMouseOutCapture","onMouseOver","onMouseOverCapture","onMouseUp","onMouseUpCapture","onPaste","onPasteCapture","onPause","onPauseCapture","onPlay","onPlayCapture","onPlaying","onPlayingCapture","onPointerCancel","onPointerCancelCapture","onPointerDown","onPointerDownCapture","onPointerEnter","onPointerLeave","onPointerMove","onPointerMoveCapture","onPointerOut","onPointerOutCapture","onPointerOver","onPointerOverCapture","onPointerUp","onPointerUpCapture","onProgress","onProgressCapture","onRateChange","onRateChangeCapture","onReset","onResetCapture","onScroll","onScrollCapture","onScrollEnd","onScrollEndCapture","onSeeked","onSeekedCapture","onSeeking","onSeekingCapture","onSelect","onSelectCapture","onStalled","onStalledCapture","onSubmit","onSubmitCapture","onSuspend","onSuspendCapture","onTimeUpdate","onTimeUpdateCapture","onToggle","onTouchCancel","onTouchCancelCapture","onTouchEnd","onTouchEndCapture","onTouchMove","onTouchMoveCapture","onTouchStart","onTouchStartCapture","onTransitionCancel","onTransitionCancelCapture","onTransitionEnd","onTransitionEndCapture","onTransitionRun","onTransitionRunCapture","onTransitionStart","onTransitionStartCapture","onVolumeChange","onVolumeChangeCapture","onWaiting","onWaitingCapture","onWheel","onWheelCapture","part","pattern","placeholder","popover","popoverTarget","popoverTargetAction","property","radioGroup","readOnly","ref","rel","required","resource","results","rev","role","security","size","slot","spellCheck","src","step","style","suppressContentEditableWarning","suppressHydrationWarning","tabIndex","title","translate","type","typeof","unselectable","value","vocab","width"],["about","accept","accessKey","alt","aria-activedescendant","aria-atomic","aria-autocomplete","aria-braillelabel","aria-brailleroledescription","aria-busy","aria-checked","aria-colcount","aria-colindex","aria-colindextext","aria-colspan","aria-controls","aria-current","aria-describedby","aria-description","aria-details","aria-disabled","aria-dropeffect","aria-errormessage","aria-expanded","aria-flowto","aria-grabbed","aria-haspopup","aria-hidden","aria-invalid","aria-keyshortcuts","aria-label","aria-labelledby","aria-level","aria-live","aria-modal","aria-multiline","aria-multiselectable","aria-orientation","aria-owns","aria-placeholder","aria-posinset","aria-pressed","aria-readonly","aria-relevant","aria-required","aria-roledescription","aria-rowcount","aria-rowindex","aria-rowindextext","aria-rowspan","aria-selected","aria-setsize","aria-sort","aria-valuemax","aria-valuemin","aria-valuenow","aria-valuetext","autoCapitalize","autoComplete","autoCorrect","autoFocus","autoSave","capture","checked","children","className","color","content","contentEditable","contextMenu","dangerouslySetInnerHTML","datatype","defaultChecked","defaultValue","dir","disabled","draggable","enterKeyHint","exportparts","form","formAction","formEncType","formMethod","formNoValidate","formTarget","height","hidden","id","inert","inlist","inputMode","is","itemID","itemProp","itemRef","itemScope","itemType","key","lang","list","max","maxLength","min","minLength","multiple","name","nonce","onAbort","onAbortCapture","onAnimationEnd","onAnimationEndCapture","onAnimationIteration","onAnimationIterationCapture","onAnimationStart","onAnimationStartCapture","onAuxClick","onAuxClickCapture","onBeforeInput","onBeforeInputCapture","onBeforeToggle","onBlur","onBlurCapture","onCanPlay","onCanPlayCapture","onCanPlayThrough","onCanPlayThroughCapture","onChange","onChangeCapture","onClick","onClickCapture","onCompositionEnd","onCompositionEndCapture","onCompositionStart","onCompositionStartCapture","onCompositionUpdate","onCompositionUpdateCapture","onContextMenu","onContextMenuCapture","onCopy","onCopyCapture","onCut","onCutCapture","onDoubleClick","onDoubleClickCapture","onDrag","onDragCapture","onDragEnd","onDragEndCapture","onDragEnter","onDragEnterCapture","onDragExit","onDragExitCapture","onDragLeave","onDragLeaveCapture","onDragOver","onDragOverCapture","onDragStart","onDragStartCapture","onDrop","onDropCapture","onDurationChange","onDurationChangeCapture","onEmptied","onEmptiedCapture","onEncrypted","onEncryptedCapture","onEnded","onEndedCapture","onError","onErrorCapture","onFocus","onFocusCapture","onGotPointerCapture","onGotPointerCaptureCapture","onInput","onInputCapture","onInvalid","onInvalidCapture","onKeyDown","onKeyDownCapture","onKeyPress","onKeyPressCapture","onKeyUp","onKeyUpCapture","onLoad","onLoadCapture","onLoadStart","onLoadStartCapture","onLoadedData","onLoadedDataCapture","onLoadedMetadata","onLoadedMetadataCapture","onLostPointerCapture","onLostPointerCaptureCapture","onMouseDown","onMouseDownCapture","onMouseEnter","onMouseLeave","onMouseMove","onMouseMoveCapture","onMouseOut","onMouseOutCapture","onMouseOver","onMouseOverCapture","onMouseUp","onMouseUpCapture","onPaste","onPasteCapture","onPause","onPauseCapture","onPlay","onPlayCapture","onPlaying","onPlayingCapture","onPointerCancel","onPointerCancelCapture","onPointerDown","onPointerDownCapture","onPointerEnter","onPointerLeave","onPointerMove","onPointerMoveCapture","onPointerOut","onPointerOutCapture","onPointerOver","onPointerOverCapture","onPointerUp","onPointerUpCapture","onProgress","onProgressCapture","onRateChange","onRateChangeCapture","onReset","onResetCapture","onScroll","onScrollCapture","onScrollEnd","onScrollEndCapture","onSeeked","onSeekedCapture","onSeeking","onSeekingCapture","onSelect","onSelectCapture","onStalled","onStalledCapture","onSubmit","onSubmitCapture","onSuspend","onSuspendCapture","onTimeUpdate","onTimeUpdateCapture","onToggle","onTouchCancel","onTouchCancelCapture","onTouchEnd","onTouchEndCapture","onTouchMove","onTouchMoveCapture","onTouchStart","onTouchStartCapture","onTransitionCancel","onTransitionCancelCapture","onTransitionEnd","onTransitionEndCapture","onTransitionRun","onTransitionRunCapture","onTransitionStart","onTransitionStartCapture","onVolumeChange","onVolumeChangeCapture","onWaiting","onWaitingCapture","onWheel","onWheelCapture","part","pattern","placeholder","popover","popoverTarget","popoverTargetAction","prefix","property","radioGroup","readOnly","ref","rel","required","resource","results","rev","role","security","size","slot","spellCheck","src","step","style","suppressContentEditableWarning","suppressHydrationWarning","tabIndex","title","translate","typeof","unselectable","value","vocab","width"],["about","accessKey","aria-activedescendant","aria-atomic","aria-autocomplete","aria-braillelabel","aria-brailleroledescription","aria-busy","aria-checked","aria-colcount","aria-colindex","aria-colindextext","aria-colspan","aria-controls","aria-current","aria-describedby","aria-description","aria-details","aria-disabled","aria-dropeffect","aria-errormessage","aria-expanded","aria-flowto","aria-grabbed","aria-haspopup","aria-hidden","aria-invalid","aria-keyshortcuts","aria-label","aria-labelledby","aria-level","aria-live","aria-modal","aria-multiline","aria-multiselectable","aria-orientation","aria-owns","aria-placeholder","aria-posinset","aria-pressed","aria-readonly","aria-relevant","aria-required","aria-roledescription","aria-rowcount","aria-rowindex","aria-rowindextext","aria-rowspan","aria-selected","aria-setsize","aria-sort","aria-valuemax","aria-valuemin","aria-valuenow","aria-valuetext","autoCapitalize","autoComplete","autoCorrect","autoFocus","autoSave","children","className","color","content","contentEditable","contextMenu","dangerouslySetInnerHTML","datatype","defaultChecked","defaultValue","dir","disabled","draggable","enterKeyHint","exportparts","form","hidden","id","inert","inlist","inputMode","is","itemID","itemProp","itemRef","itemScope","itemType","lang","multiple","name","nonce","onAbort","onAbortCapture","onAnimationEnd","onAnimationEndCapture","onAnimationIteration","onAnimationIterationCapture","onAnimationStart","onAnimationStartCapture","onAuxClick","onAuxClickCapture","onBeforeInput","onBeforeInputCapture","onBeforeToggle","onBlur","onBlurCapture","onCanPlay","onCanPlayCapture","onCanPlayThrough","onCanPlayThroughCapture","onChange","onChangeCapture","onClick","onClickCapture","onCompositionEnd","onCompositionEndCapture","onCompositionStart","onCompositionStartCapture","onCompositionUpdate","onCompositionUpdateCapture","onContextMenu","onContextMenuCapture","onCopy","onCopyCapture","onCut","onCutCapture","onDoubleClick","onDoubleClickCapture","onDrag","onDragCapture","onDragEnd","onDragEndCapture","onDragEnter","onDragEnterCapture","onDragExit","onDragExitCapture","onDragLeave","onDragLeaveCapture","onDragOver","onDragOverCapture","onDragStart","onDragStartCapture","onDrop","onDropCapture","onDurationChange","onDurationChangeCapture","onEmptied","onEmptiedCapture","onEncrypted","onEncryptedCapture","onEnded","onEndedCapture","onError","onErrorCapture","onFocus","onFocusCapture","onGotPointerCapture","onGotPointerCaptureCapture","onInput","onInputCapture","onInvalid","onInvalidCapture","onKeyDown","onKeyDownCapture","onKeyPress","onKeyPressCapture","onKeyUp","onKeyUpCapture","onLoad","onLoadCapture","onLoadStart","onLoadStartCapture","onLoadedData","onLoadedDataCapture","onLoadedMetadata","onLoadedMetadataCapture","onLostPointerCapture","onLostPointerCaptureCapture","onMouseDown","onMouseDownCapture","onMouseEnter","onMouseLeave","onMouseMove","onMouseMoveCapture","onMouseOut","onMouseOutCapture","onMouseOver","onMouseOverCapture","onMouseUp","onMouseUpCapture","onPaste","onPasteCapture","onPause","onPauseCapture","onPlay","onPlayCapture","onPlaying","onPlayingCapture","onPointerCancel","onPointerCancelCapture","onPointerDown","onPointerDownCapture","onPointerEnter","onPointerLeave","onPointerMove","onPointerMoveCapture","onPointerOut","onPointerOutCapture","onPointerOver","onPointerOverCapture","onPointerUp","onPointerUpCapture","onProgress","onProgressCapture","onRateChange","onRateChangeCapture","onReset","onResetCapture","onScroll","onScrollCapture","onScrollEnd","onScrollEndCapture","onSeeked","onSeekedCapture","onSeeking","onSeekingCapture","onSelect","onSelectCapture","onStalled","onStalledCapture","onSubmit","onSubmitCapture","onSuspend","onSuspendCapture","onTimeUpdate","onTimeUpdateCapture","onToggle","onTouchCancel","onTouchCancelCapture","onTouchEnd","onTouchEndCapture","onTouchMove","onTouchMoveCapture","onTouchStart","onTouchStartCapture","onTransitionCancel","onTransitionCancelCapture","onTransitionEnd","onTransitionEndCapture","onTransitionRun","onTransitionRunCapture","onTransitionStart","onTransitionStartCapture","onVolumeChange","onVolumeChangeCapture","onWaiting","onWaitingCapture","onWheel","onWheelCapture","part","popover","popoverTarget","popoverTargetAction","prefix","property","radioGroup","rel","required","resource","results","rev","role","security","size","slot","spellCheck","style","suppressContentEditableWarning","suppressHydrationWarning","tabIndex","title","translate","typeof","unselectable","value","vocab"],["about","accept","accessKey","alt","aria-activedescendant","aria-atomic","aria-autocomplete","aria-braillelabel","aria-brailleroledescription","aria-busy","aria-checked","aria-colcount","aria-colindex","aria-colindextext","aria-colspan","aria-controls","aria-current","aria-describedby","aria-description","aria-details","aria-disabled","aria-dropeffect","aria-errormessage","aria-expanded","aria-flowto","aria-grabbed","aria-haspopup","aria-hidden","aria-invalid","aria-keyshortcuts","aria-label","aria-labelledby","aria-level","aria-live","aria-modal","aria-multiline","aria-multiselectable","aria-orientation","aria-owns","aria-placeholder","aria-posinset","aria-pressed","aria-readonly","aria-relevant","aria-required","aria-roledescription","aria-rowcount","aria-rowindex","aria-rowindextext","aria-rowspan","aria-selected","aria-setsize","aria-sort","aria-valuemax","aria-valuemin","aria-valuenow","aria-valuetext","autoCapitalize","autoComplete","autoCorrect","autoFocus","autoSave","capture","checked","children","className","color","content","contentEditable","contextMenu","dangerouslySetInnerHTML","datatype","defaultChecked","defaultValue","dir","disabled","draggable","enterKeyHint","exportparts","form","formAction","formEncType","formMethod","formNoValidate","formTarget","height","hidden","id","inert","inlist","inputMode","is","itemID","itemProp","itemRef","itemScope","itemType","lang","list","max","maxLength","min","minLength","multiple","name","nonce","onAbort","onAbortCapture","onAnimationEnd","onAnimationEndCapture","onAnimationIteration","onAnimationIterationCapture","onAnimationStart","onAnimationStartCapture","onAuxClick","onAuxClickCapture","onBeforeInput","onBeforeInputCapture","onBeforeToggle","onBlur","onBlurCapture","onCanPlay","onCanPlayCapture","onCanPlayThrough","onCanPlayThroughCapture","onChange","onChangeCapture","onClick","onClickCapture","onCompositionEnd","onCompositionEndCapture","onCompositionStart","onCompositionStartCapture","onCompositionUpdate","onCompositionUpdateCapture","onContextMenu","onContextMenuCapture","onCopy","onCopyCapture","onCut","onCutCapture","onDoubleClick","onDoubleClickCapture","onDrag","onDragCapture","onDragEnd","onDragEndCapture","onDragEnter","onDragEnterCapture","onDragExit","onDragExitCapture","onDragLeave","onDragLeaveCapture","onDragOver","onDragOverCapture","onDragStart","onDragStartCapture","onDrop","onDropCapture","onDurationChange","onDurationChangeCapture","onEmptied","onEmptiedCapture","onEncrypted","onEncryptedCapture","onEnded","onEndedCapture","onError","onErrorCapture","onFocus","onFocusCapture","onGotPointerCapture","onGotPointerCaptureCapture","onInput","onInputCapture","onInvalid","onInvalidCapture","onKeyDown","onKeyDownCapture","onKeyPress","onKeyPressCapture","onKeyUp","onKeyUpCapture","onLoad","onLoadCapture","onLoadStart","onLoadStartCapture","onLoadedData","onLoadedDataCapture","onLoadedMetadata","onLoadedMetadataCapture","onLostPointerCapture","onLostPointerCaptureCapture","onMouseDown","onMouseDownCapture","onMouseEnter","onMouseLeave","onMouseMove","onMouseMoveCapture","onMouseOut","onMouseOutCapture","onMouseOver","onMouseOverCapture","onMouseUp","onMouseUpCapture","onPaste","onPasteCapture","onPause","onPauseCapture","onPlay","onPlayCapture","onPlaying","onPlayingCapture","onPointerCancel","onPointerCancelCapture","onPointerDown","onPointerDownCapture","onPointerEnter","onPointerLeave","onPointerMove","onPointerMoveCapture","onPointerOut","onPointerOutCapture","onPointerOver","onPointerOverCapture","onPointerUp","onPointerUpCapture","onProgress","onProgressCapture","onRateChange","onRateChangeCapture","onReset","onResetCapture","onScroll","onScrollCapture","onScrollEnd","onScrollEndCapture","onSeeked","onSeekedCapture","onSeeking","onSeekingCapture","onSelect","onSelectCapture","onStalled","onStalledCapture","onSubmit","onSubmitCapture","onSuspend","onSuspendCapture","onTimeUpdate","onTimeUpdateCapture","onToggle","onTouchCancel","onTouchCancelCapture","onTouchEnd","onTouchEndCapture","onTouchMove","onTouchMoveCapture","onTouchStart","onTouchStartCapture","onTransitionCancel","onTransitionCancelCapture","onTransitionEnd","onTransitionEndCapture","onTransitionRun","onTransitionRunCapture","onTransitionStart","onTransitionStartCapture","onVolumeChange","onVolumeChangeCapture","onWaiting","onWaitingCapture","onWheel","onWheelCapture","part","pattern","placeholder","popover","popoverTarget","popoverTargetAction","prefix","property","radioGroup","readOnly","rel","required","resource","results","rev","security","size","slot","spellCheck","src","step","style","suppressContentEditableWarning","suppressHydrationWarning","tabIndex","title","translate","typeof","unselectable","value","vocab","width"],["about","accessKey","aria-activedescendant","aria-atomic","aria-autocomplete","aria-braillelabel","aria-brailleroledescription","aria-busy","aria-checked","aria-colcount","aria-colindex","aria-colindextext","aria-colspan","aria-controls","aria-current","aria-describedby","aria-description","aria-details","aria-disabled","aria-dropeffect","aria-errormessage","aria-expanded","aria-flowto","aria-grabbed","aria-haspopup","aria-hidden","aria-invalid","aria-keyshortcuts","aria-label","aria-labelledby","aria-level","aria-live","aria-modal","aria-multiline","aria-multiselectable","aria-orientation","aria-owns","aria-placeholder","aria-posinset","aria-pressed","aria-readonly","aria-relevant","aria-required","aria-roledescription","aria-rowcount","aria-rowindex","aria-rowindextext","aria-rowspan","aria-selected","aria-setsize","aria-sort","aria-valuemax","aria-valuemin","aria-valuenow","aria-valuetext","autoCapitalize","autoComplete","autoCorrect","autoFocus","autoSave","children","className","color","cols","content","contentEditable","contextMenu","dangerouslySetInnerHTML","datatype","defaultChecked","defaultValue","dir","dirName","disabled","draggable","enterKeyHint","exportparts","form","hidden","id","inert","inlist","inputMode","is","itemID","itemProp","itemRef","itemScope","itemType","lang","maxLength","minLength","name","nonce","onAbort","onAbortCapture","onAnimationEnd","onAnimationEndCapture","onAnimationIteration","onAnimationIterationCapture","onAnimationStart","onAnimationStartCapture","onAuxClick","onAuxClickCapture","onBeforeInput","onBeforeInputCapture","onBeforeToggle","onBlur","onBlurCapture","onCanPlay","onCanPlayCapture","onCanPlayThrough","onCanPlayThroughCapture","onChange","onChangeCapture","onClick","onClickCapture","onCompositionEnd","onCompositionEndCapture","onCompositionStart","onCompositionStartCapture","onCompositionUpdate","onCompositionUpdateCapture","onContextMenu","onContextMenuCapture","onCopy","onCopyCapture","onCut","onCutCapture","onDoubleClick","onDoubleClickCapture","onDrag","onDragCapture","onDragEnd","onDragEndCapture","onDragEnter","onDragEnterCapture","onDragExit","onDragExitCapture","onDragLeave","onDragLeaveCapture","onDragOver","onDragOverCapture","onDragStart","onDragStartCapture","onDrop","onDropCapture","onDurationChange","onDurationChangeCapture","onEmptied","onEmptiedCapture","onEncrypted","onEncryptedCapture","onEnded","onEndedCapture","onError","onErrorCapture","onFocus","onFocusCapture","onGotPointerCapture","onGotPointerCaptureCapture","onInput","onInputCapture","onInvalid","onInvalidCapture","onKeyDown","onKeyDownCapture","onKeyPress","onKeyPressCapture","onKeyUp","onKeyUpCapture","onLoad","onLoadCapture","onLoadStart","onLoadStartCapture","onLoadedData","onLoadedDataCapture","onLoadedMetadata","onLoadedMetadataCapture","onLostPointerCapture","onLostPointerCaptureCapture","onMouseDown","onMouseDownCapture","onMouseEnter","onMouseLeave","onMouseMove","onMouseMoveCapture","onMouseOut","onMouseOutCapture","onMouseOver","onMouseOverCapture","onMouseUp","onMouseUpCapture","onPaste","onPasteCapture","onPause","onPauseCapture","onPlay","onPlayCapture","onPlaying","onPlayingCapture","onPointerCancel","onPointerCancelCapture","onPointerDown","onPointerDownCapture","onPointerEnter","onPointerLeave","onPointerMove","onPointerMoveCapture","onPointerOut","onPointerOutCapture","onPointerOver","onPointerOverCapture","onPointerUp","onPointerUpCapture","onProgress","onProgressCapture","onRateChange","onRateChangeCapture","onReset","onResetCapture","onScroll","onScrollCapture","onScrollEnd","onScrollEndCapture","onSeeked","onSeekedCapture","onSeeking","onSeekingCapture","onSelect","onSelectCapture","onStalled","onStalledCapture","onSubmit","onSubmitCapture","onSuspend","onSuspendCapture","onTimeUpdate","onTimeUpdateCapture","onToggle","onTouchCancel","onTouchCancelCapture","onTouchEnd","onTouchEndCapture","onTouchMove","onTouchMoveCapture","onTouchStart","onTouchStartCapture","onTransitionCancel","onTransitionCancelCapture","onTransitionEnd","onTransitionEndCapture","onTransitionRun","onTransitionRunCapture","onTransitionStart","onTransitionStartCapture","onVolumeChange","onVolumeChangeCapture","onWaiting","onWaitingCapture","onWheel","onWheelCapture","part","placeholder","popover","popoverTarget","popoverTargetAction","prefix","property","radioGroup","readOnly","rel","required","resource","results","rev","role","rows","security","slot","spellCheck","style","suppressContentEditableWarning","suppressHydrationWarning","tabIndex","title","translate","typeof","unselectable","value","vocab","wrap"]],"classes":["m-action-panel","m-action-panel-action","m-action-panel-text","m-action-panel-title","m-actions","m-activity","m-activity-actor","m-activity-body","m-activity-dot","m-api-description","m-api-endpoint","m-api-examples","m-api-params-title","m-api-route","m-api-text","m-api-title","m-app-aside","m-app-columns","m-app-header","m-app-main","m-app-shell","m-attachment-icon","m-attachment-name","m-attachment-size","m-attachment-text","m-attachments","m-auth","m-auth-aside","m-auth-body","m-auth-footer","m-auth-header","m-auth-main","m-auth-panel","m-auth-title","m-avatar","m-avatar-group","m-avatar-lg","m-avatar-more","m-avatar-placeholder","m-avatar-sm","m-avatar-status","m-avatar-xl","m-avatar-xs","m-backdrop","m-badge","m-banner","m-bento","m-bento-visual","m-brand","m-brand-lockup","m-brand-tagline","m-breadcrumbs","m-button","m-button-accent","m-button-danger","m-button-ghost","m-button-group","m-button-group-icon","m-button-icon","m-button-primary","m-button-secondary","m-calendar","m-calendar-agenda","m-calendar-agenda-list","m-calendar-agenda-text","m-calendar-agenda-title","m-calendar-allday","m-calendar-column","m-calendar-column-heading","m-calendar-column-label","m-calendar-columns","m-calendar-dot","m-calendar-event","m-calendar-event-time","m-calendar-events","m-calendar-header","m-calendar-hours","m-calendar-main","m-calendar-month","m-calendar-month-title","m-calendar-more","m-calendar-nav","m-calendar-none","m-calendar-slots","m-calendar-timegrid","m-calendar-title","m-calendar-year","m-callout","m-card","m-card-actions","m-card-body","m-card-footer","m-card-header","m-card-heading","m-card-title","m-cart","m-cart-controls","m-cart-empty","m-cart-info","m-cart-item-title","m-cart-layout","m-cart-related","m-cart-related-title","m-cart-remove","m-cart-stock","m-cart-summary","m-chat-avatar","m-chat-bubble","m-chat-composer","m-chat-log","m-chat-preview","m-chat-send","m-chat-suggestions","m-chat-typing","m-check-list","m-chip","m-choice","m-choice-check","m-choice-control","m-choice-described","m-choice-leading","m-choice-option","m-choice-options","m-choice-text","m-choice-value","m-code-bar","m-code-block","m-code-cell","m-code-cells","m-code-control","m-code-copy","m-code-input","m-code-line","m-code-number","m-code-prompt","m-code-tabs","m-combobox","m-combobox-options","m-combobox-toggle","m-comparison","m-comparison-group","m-comparison-no","m-composer","m-composer-actions","m-composer-avatar","m-composer-bar","m-composer-box","m-composer-count","m-composer-empty","m-composer-label","m-composer-main","m-composer-preview","m-confirm","m-confirm-actions","m-confirm-body","m-contact","m-contact-body","m-contact-form","m-contact-media","m-contact-offices","m-container","m-content-copy","m-content-media","m-content-quote","m-content-section","m-content-stats","m-cover-background","m-cta","m-cta-copy","m-cta-media","m-data-table","m-description-action","m-description-heading","m-description-list","m-description-title","m-dialog","m-dialog-heading","m-dialog-panel","m-dialog-position","m-divider","m-docs-body","m-docs-header","m-docs-nav","m-docs-sections","m-docs-shell","m-docs-toc","m-docs-toc-footer","m-docs-version","m-emphasis","m-empty","m-empty-extra","m-empty-icon","m-error","m-error-summary","m-error-summary-title","m-eyebrow","m-faq","m-faq-grid","m-feature-details","m-feature-grid","m-feature-icon","m-feature-preview","m-feature-section","m-field","m-fieldset","m-fieldset-fields","m-file-caret","m-file-row","m-file-tree","m-filter-active","m-filter-chips","m-filter-clear","m-filter-count","m-filters","m-flyout","m-flyout-footer","m-flyout-icon","m-flyout-panel","m-flyout-text","m-flyout-trigger","m-footer","m-footer-bottom","m-footer-center","m-footer-grid","m-footer-inline","m-footer-newsletter","m-grid-list","m-grid-list-actions","m-grid-list-body","m-grid-list-cover","m-grid-list-details","m-grid-list-media","m-grid-list-meta","m-grid-list-text","m-grid-list-title","m-header-context","m-header-links","m-header-section","m-header-stats","m-heading-avatar","m-heading-main","m-heading-meta","m-heading-row","m-hero","m-hero-angled","m-hero-background","m-hero-center","m-hero-description","m-hero-note","m-hero-preview","m-hero-split","m-hero-tiles","m-icon-links","m-input-action","m-input-group","m-input-icon","m-kbd","m-kbd-group","m-layout-stack","m-link-cards","m-logo","m-logo-cloud","m-logo-cloud-copy","m-mark","m-marketing-header","m-marketing-main","m-marketing-page","m-marketing-panel","m-marketing-panel-nav","m-marketing-section","m-media-object","m-media-object-body","m-media-object-media","m-media-object-title","m-menu","m-menu-header","m-menu-heading","m-menu-icon","m-menu-separator","m-menu-text","m-menu-trigger","m-metric-change","m-metric-icon","m-metric-previous","m-metrics","m-mobile-sidebar","m-mock-address","m-mock-bar","m-mock-body","m-mock-dots","m-mock-window","m-nav-children","m-nav-count","m-nav-group","m-nav-group-title","m-nav-icon","m-nav-marker","m-navbar","m-navbar-toggle","m-network","m-network-label","m-network-link","m-network-node","m-network-signal","m-network-toggle","m-newsletter","m-newsletter-status","m-not-found","m-not-found-art","m-notice","m-notice-actions","m-notice-dismiss","m-order","m-order-action","m-order-actions","m-order-header","m-order-hint","m-order-history","m-order-item-actions","m-order-item-name","m-order-items","m-order-progress","m-order-status","m-order-summary","m-order-summary-title","m-order-title","m-order-total","m-page-feedback","m-page-heading","m-page-title","m-pager","m-pagination","m-pagination-gap","m-pagination-pages","m-palette","m-palette-attribution","m-palette-empty","m-palette-footer","m-palette-group","m-palette-icon","m-palette-input","m-palette-item","m-palette-meta","m-palette-position","m-palette-results","m-param-list","m-password-meter","m-password-requirements","m-password-strength","m-password-toggle","m-placeholder","m-post-image","m-post-list","m-post-meta","m-post-title","m-preview-frame","m-price","m-pricing","m-pricing-detail","m-pricing-extra","m-pricing-features-label","m-pricing-grid","m-pricing-offer","m-process-number","m-process-steps","m-product-badge","m-product-card-action","m-product-description","m-product-details","m-product-form","m-product-gallery","m-product-highlights","m-product-image","m-product-info","m-product-list","m-product-meta","m-product-name","m-product-option","m-product-overlay","m-product-overview","m-product-price","m-product-summary","m-product-swatches","m-product-thumbs","m-progress","m-progress-label","m-progress-step-description","m-progress-step-marker","m-progress-step-name","m-progress-step-number","m-progress-step-text","m-progress-steps","m-progress-track","m-prose","m-provider-buttons","m-quick-view","m-radio-card","m-radio-group","m-rating","m-release","m-release-type","m-release-version","m-required","m-review","m-review-avatar","m-review-body","m-review-list","m-review-meta","m-review-title","m-reviews","m-reviews-distribution","m-reviews-summary","m-reviews-title","m-row-link","m-save-bar","m-search-trigger","m-section","m-section-body","m-section-description","m-section-heading","m-section-heading-row","m-section-heading-tabs","m-section-heading-text","m-section-heading-title","m-section-title","m-segmented","m-select-control","m-settings-section","m-settings-title","m-sidebar","m-sidebar-panel","m-sign-in","m-sign-in-aside","m-sign-in-split","m-sign-in-title","m-skip","m-slide-over","m-slide-over-body","m-sort-button","m-spinner","m-sr-only","m-stack","m-stacked-action","m-stacked-chevron","m-stacked-group","m-stacked-group-heading","m-stacked-header","m-stacked-list","m-stacked-meta","m-stacked-shell","m-stacked-tabs","m-stacked-text","m-stacked-title","m-stars","m-stat-band","m-stat-description","m-stat-group","m-step-description","m-step-number","m-steps","m-swatch","m-switch","m-tab-count","m-tab-icon","m-tab-nav","m-table","m-table-footer","m-table-group","m-table-scroll","m-table-select-col","m-table-state","m-table-toolbar","m-tabs","m-team-bio","m-team-grid","m-team-portrait","m-testimonial","m-testimonial-avatar","m-testimonial-grid","m-testimonial-logo","m-testimonial-person","m-text","m-theme-scope","m-toast","m-toast-icon","m-toast-leading","m-toaster","m-truncate","m-user","m-workspace"],"sourceHashes":{"f61cfa1f65ddd4b47a668ed0557511b0ffc0067fd8a94f35fe31cc504ab4dd21":"src/application.css","9662f76273defc818f2302747807674592bef3141355e9fc0021a5f1622df7b5":"src/application.tsx","73d20dd789ccebbea621f9ae3ff3294ddde949c4b99801faa74c159c36238a42":"src/auth.tsx","d283e2ccf0720ba91d186abeb40c85cf8aa362e13cf0f0d689f8f42465af01f6":"src/brand.ts","7df063c61129c6b9ca8e2bef71d19c291e962e8652039d49e740b68ae06872ee":"src/calendar.css","a2fd58e5617bd7a8f1a6fe2ab66f1757bf06e2ca0cb444a7b64cca2b2203dfcb":"src/calendar.tsx","097d48e77f9cd59fe232be784f5852b6b17aa6656e1c0bf439e6fe879b61f54c":"src/choice.tsx","93bc2268e4b28a4aa5cee0e5ffbc22f2810d867205eadc83d532f3e9ba916e13":"src/composer.tsx","ffa926fdaa03890b586ceb89861d727d3fdd4e0b37977f0351426c49dab31f1f":"src/data.css","fe37e3674cee3441b9696121857c4e9150102360d46d08fc8ea019a800c1cf3b":"src/display.tsx","6f61f8ae4bdde7969d6124601b784b905fd54799366f3978d4ae55862aea2408":"src/docs.css","28c32fdba8795c2f53ca3ad977ef9ffe68b3bfa215f150c481f0d9258b31d1aa":"src/docs.tsx","d7e92ff54b56556b49ce75d0b99931f0610da80114b157fb47f1f5a7ff73a4b9":"src/ecommerce.css","45845ac5581a7417b6d211a1efa4206c2d41ad096a9bcb3cf09725f725163906":"src/ecommerce.tsx","d0bad679e37833206557957c1a214455280bf7d3d5361f7274e5120387f72b15":"src/feedback.tsx","c2b1499101c4a5e7970d6e573ed9af2b012d66402c05de8039715ff94360b653":"src/foundation.css","a596614062e448c702249dcf72a833bd71f38381f1ad987d1a1d364af52444a1":"src/foundation.tsx","df931d5df89ccf7fe48cc1c566f14fc6feef78a96a31d45f12b771612a08f09f":"src/heading.ts","c95bfd472c58d9dc950aaf0f10f44f87507d26530e5602980dd2cb63f80b41e0":"src/icons.tsx","5caed2388a5f528f59eb32d06472c8c536ce05c5f281b1d8c32a489c7d671d6f":"src/illustration.tsx","bae545bd78a7fd346b63a70556f1a7a7636d26dcf913bb8ba8cb98f3407c8ca9":"src/index.ts","377f8386213c3a5ab082b591ac6e7ce2d74ccf28aa990f9294cb4a4f9cf8dd1b":"src/inspection.tsx","716e6180056763baf7b755fd382ce0349d2a77c1f1ea1bff704ceb026461d8f6":"src/internal.tsx","daaf5eb0108d270f2e843645baf4cc1f1636f2f3e39de760424616e8b5a3845b":"src/layout.tsx","4131f911f35202e88244d263dd3de88a03f141e6cad73ac66785078c18c2ca2e":"src/marketing-sections.tsx","04bf529efefd6f59fd5258683a010d338b0bf042a95aa2df82535aa31de0eb0e":"src/marketing.css","98a8fbb90dc1851d9d502b1a6407dc48d33d5d0f924316c7354aa5515ce6b02f":"src/marketing.tsx","07b646fa1f37b54d5ff8eccbcc8c572a4b5273cb72e0f4739b0b5f8b8eef3150":"src/navigation.tsx","2b68538d7ac86d5908629095212467757d9e3308cd7aabeee6f341b3a1650559":"src/overlays.css","f0a7ee099cfba2463d38cd5e05345ead3f578fa1ee3ef9a8e17471457d125223":"src/primitives.tsx","05e50c773c0df97c9643cea3976bdf192f4a67700fbc54fa5eb0fe621efe587d":"src/showcase.tsx","99426a51385eff27f3084a7b9f9622512d2c799c6a51e54fe029c1952325231c":"src/tokens.css","f40c2837f9684ef9b165842b5e134cd91780a38ef2821261451901dc0b4a6890":"src/workspace.tsx"}}