50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[544296,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ItemStyles"] 52:I[34002,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"CodeEditor"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:Ta43,'use client'; import {AppShell} from '@astryxdesign/core/AppShell'; import {Banner} from '@astryxdesign/core/Banner'; import {VStack} from '@astryxdesign/core/Stack'; import {Heading, Text} from '@astryxdesign/core/Text'; import {TopNav, TopNavHeading, TopNavItem} from '@astryxdesign/core/TopNav'; import {NavIcon} from '@astryxdesign/core/NavIcon'; import {SideNav, SideNavItem, SideNavSection} from '@astryxdesign/core/SideNav'; import { ChartBarIcon, FolderIcon, UsersIcon, Cog6ToothIcon, } from '@heroicons/react/24/outline'; import {HomeIcon} from '@heroicons/react/24/solid'; import {CubeIcon} from '@heroicons/react/24/outline'; export default function AppShellWithBanner() { return ( } /> } /> } startContent={ <> } /> } sideNav={ } banner={ }> Page Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. ); } 55:T193b,{ "schemaVersion": 2, "item": { "name": "example-app-shell-with-banner", "path": "examples/app-shell/with-banner", "aliases": [], "kind": "example" }, "source": { "package": "@astryxdesign/cli", "version": "0.7.3" }, "files": [ { "id": "primary", "target": "../AppShellWithBanner.tsx", "registryTarget": "components/astryx/examples/AppShellWithBanner.tsx", "registryPath": "registry/example-app-shell-with-banner/AppShellWithBanner.tsx", "sha256": "ab28332a339150190044c0cffeb63a536a541b5c54ad5f9061d8e206b17d7f77", "content": "'use client';\n\nimport {AppShell} from '@astryxdesign/core/AppShell';\nimport {Banner} from '@astryxdesign/core/Banner';\nimport {VStack} from '@astryxdesign/core/Stack';\nimport {Heading, Text} from '@astryxdesign/core/Text';\nimport {TopNav, TopNavHeading, TopNavItem} from '@astryxdesign/core/TopNav';\nimport {NavIcon} from '@astryxdesign/core/NavIcon';\nimport {SideNav, SideNavItem, SideNavSection} from '@astryxdesign/core/SideNav';\nimport {\n ChartBarIcon,\n FolderIcon,\n UsersIcon,\n Cog6ToothIcon,\n} from '@heroicons/react/24/outline';\nimport {HomeIcon} from '@heroicons/react/24/solid';\nimport {CubeIcon} from '@heroicons/react/24/outline';\n\nexport default function AppShellWithBanner() {\n return (\n } />\n }\n />\n }\n startContent={\n <>\n \n \n \n \n }\n />\n }\n sideNav={\n \n \n \n \n \n \n \n \n \n \n \n }\n banner={\n \n }>\n \n Page Content\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad\n minim veniam, quis nostrud exercitation ullamco laboris.\n \n \n \n );\n}\n", "variants": [ { "format": "javascript", "target": "../AppShellWithBanner.jsx", "registryTarget": "components/astryx/examples/AppShellWithBanner.jsx", "sha256": "ab28332a339150190044c0cffeb63a536a541b5c54ad5f9061d8e206b17d7f77", "content": "'use client';\n\nimport {AppShell} from '@astryxdesign/core/AppShell';\nimport {Banner} from '@astryxdesign/core/Banner';\nimport {VStack} from '@astryxdesign/core/Stack';\nimport {Heading, Text} from '@astryxdesign/core/Text';\nimport {TopNav, TopNavHeading, TopNavItem} from '@astryxdesign/core/TopNav';\nimport {NavIcon} from '@astryxdesign/core/NavIcon';\nimport {SideNav, SideNavItem, SideNavSection} from '@astryxdesign/core/SideNav';\nimport {\n ChartBarIcon,\n FolderIcon,\n UsersIcon,\n Cog6ToothIcon,\n} from '@heroicons/react/24/outline';\nimport {HomeIcon} from '@heroicons/react/24/solid';\nimport {CubeIcon} from '@heroicons/react/24/outline';\n\nexport default function AppShellWithBanner() {\n return (\n } />\n }\n />\n }\n startContent={\n <>\n \n \n \n \n }\n />\n }\n sideNav={\n \n \n \n \n \n \n \n \n \n \n \n }\n banner={\n \n }>\n \n Page Content\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad\n minim veniam, quis nostrud exercitation ullamco laboris.\n \n \n \n );\n}\n" } ] } ] } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@astryxdesign/core@0.7.3",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40astryxdesign%2Fcore","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@astryxdesign/core@0.7.3"}]]}]}],["$","li","@heroicons/react@2.2.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40heroicons%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@heroicons/react@2.2.0"}]]}]}],["$","li","@stylexjs/stylex@0.19.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40stylexjs%2Fstylex","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@stylexjs/stylex@0.19.0"}]]}]}]]}],["$","$L50",null,{"namespace":"@astryx","registryDependencies":[]}]]}],["$","$L51",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L52",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"@astryxdesign/core/reset.css\" {\n\n}\n\n@import \"@astryxdesign/core/astryx.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L53",null,{"files":[{"path":"registry/example-app-shell-with-banner/AppShellWithBanner.tsx","content":"$54","type":"registry:block","target":"components/astryx/examples/AppShellWithBanner.tsx"},{"path":"registry/example-app-shell-with-banner/astryx-receipt.json","content":"$55","type":"registry:file","target":"components/astryx/examples/.astryx/example-app-shell-with-banner.json"}],"className":"h-[70svh] min-h-80"}]]}]