[{"data":1,"prerenderedAt":1182},["ShallowReactive",2],{"i-devicon:nuxt":3,"content:\u002Fgetting-started":8,"i-ph:house-line-duotone":1153,"i-ph:caret-down":1156,"i-ph:caret-left":1158,"i-ph:folder-open-duotone":1160,"i-ph:caret-right":1162,"i-ph:clipboard-duotone":1164,"i-ph:link":1166,"i-ph:folder-open-fill":1168,"i-ph:folder-duotone":1170,"i-ph:file-text-fill":1172,"i-ph:file-duotone":1174,"i-ph:asterisk-bold":1176,"i-ph:circle-notch-thin":1178,"i-ph:desktop-duotone":1180},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,128,false,"\u003Cpath fill=\"#00dc82\" d=\"M71.679 106.667h47.359c1.514 0 2.962-.533 4.268-1.283c1.307-.75 2.66-1.688 3.415-2.986S128 99.629 128 98.134s-.524-2.971-1.279-4.268l-32-55.038c-.755-1.297-1.68-2.24-2.99-2.991c-1.312-.751-3.18-1.279-4.695-1.279c-1.514 0-2.957.533-4.263 1.279s-2.232 1.693-2.987 2.991l-8.108 14.08l-16.213-27.311c-.755-1.297-1.68-2.66-2.986-3.41s-2.755-.854-4.269-.854s-2.957.104-4.264.854c-1.306.75-2.66 2.113-3.415 3.41L.854 93.864C.099 95.161 0 96.634 0 98.134s.099 2.966.854 4.263c.754 1.297 2.103 2.24 3.415 2.986c1.311.747 2.754 1.284 4.264 1.284H38.4c11.835 0 20.449-5.31 26.453-15.364l14.505-25.17l7.678-13.226l23.468 40.104H79.359ZM37.97 93.01H17.066l31.147-53.76L64 66.134L53.543 84.361c-3.986 6.523-8.533 8.65-15.572 8.65zm0 0\"\u002F>",{"comark":9,"seo":1151,"rawbody":1152},{"frontmatter":10,"meta":11,"nodes":33},{},{"toc":12},{"title":13,"searchDepth":14,"depth":14,"links":15},"",2,[16,19],{"id":17,"depth":14,"text":18},"quick-start","Quick start",{"id":20,"depth":14,"text":21,"children":22},"configuration","Configuration",[23,27,30],{"id":24,"depth":25,"text":26},"configuration-create-an-code-appconfigts",3,"Create an app.config.ts",{"id":28,"depth":25,"text":29},"configuration-extending-theme-styles","Extending theme styles",{"id":31,"depth":25,"text":32},"configuration-overriding-components","Overriding components",[34,39,43,46,59,62,75,84,95,108,116,125,131,140,143,145,152,159,185,199,207,209,220,227,232,237,245,252,257,259,262,269],[35,36,38],"h1",{"id":37},"get-started","Get started",[40,41,42],"p",{},"I intend to run through through what I've created so you can start writing your own pastel themed documentation.",[44,45,18],"h2",{"id":17},[40,47,48,49,53,54],{},"For more information about ",[50,51,52],"code",{},"layers"," I suggest you checkout this page — ",[55,56,58],"a",{"href":57},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002F4.x\u002Fguide\u002Fgoing-further\u002Flayers","Authoring Nuxt Layers",[40,60,61],{},"Follow the steps below to have the base setup for your pastel themed documentation:",[63,64,65,69],"ul",{},[66,67,68],"li",{},"Create a new project — obviously.",[66,70,71,72],{},"Add the following to the ",[50,73,74],{},"nuxt.config.ts",[76,77,80],"pre",{"language":78,"filename":79},"ts","nuxt.config",[50,81,83],{"class":82},"language-ts","export default defineNuxtConfig({\n  extends: [[\"github:oyedejioyewole\u002Fnuxt-pastel-docs\", { install: true }]],\n});",[40,85,86,90,91,94],{},[87,88,89],"strong",{},"Info:"," This command adds ",[50,92,93],{},"nuxt-pastel-docs"," as a remote layer and its installs dependencies.",[63,96,97],{},[66,98,99,100,104,105],{},"Install ",[55,101,103],{"href":102},"https:\u002F\u002Fcontent.nuxt.com","@nuxt\u002Fcontent"," as a ",[50,106,107],{},"dependency",[40,109,110,112,113,115],{},[87,111,89],{}," Apparently, if you don't install ",[50,114,103],{}," it wouldn't be recognized in your project.",[63,117,118],{},[66,119,120,121,124],{},"Create a ",[50,122,123],{},"content.config.ts"," with the following content:",[76,126,128],{"language":78,"filename":127},"content.config",[50,129,130],{"class":82},"import { defineContentConfig, defineCollection, z } from \"@nuxt\u002Fcontent\";\n\nexport default defineContentConfig({\n  collections: {\n    content: defineCollection({\n      type: \"page\",\n      source: \"**\u002F*.md\",\n      schema: z.object({\n        rawbody: z.string(),\n      }),\n    }),\n  },\n});",[40,132,133,135,136,139],{},[87,134,89],{}," This defines a schema where ",[50,137,138],{},"rawbody"," contains the raw Markdown content for each page.",[40,141,142],{},"Perfect, now you can enjoy writing your documentation.",[44,144,21],{"id":20},[40,146,147,148,151],{},"Now for the fun part, customization ",[149,150],"sparkles",{},":",[153,154,155,156],"h3",{"id":24},"Create an ",[50,157,158],{},"app.config.ts",[40,160,161,162,165,166,169,170,173,174,173,177,180,181,184],{},"Through the ",[50,163,164],{},"pastelDocs"," object, you can customize properties like the ",[50,167,168],{},"features"," list, the ",[50,171,172],{},"themeColor",", the ",[50,175,176],{},"headline",[50,178,179],{},"iconMap",", and the footer ",[50,182,183],{},"iconLinks",".",[40,186,187,188,191,192,195,196,198],{},"I overrode the type inference for ",[50,189,190],{},"defineAppConfig"," and ",[50,193,194],{},"useAppConfig"," to include the ",[50,197,164],{}," object, so you can get type hints and auto-completion in your IDE.",[40,200,201,202,206],{},"To view the full list of properties you can customize, check out the ",[55,203,205],{"href":204},"..\u002F..\u002Ftypes\u002Fconfig.d.ts","types\u002Fconfig.d.ts"," file.",[153,208,29],{"id":28},[40,210,211,212,219],{},"In cases you don't want to completely override components, you ",[87,213,215],{"class":214},"font-cursive",[216,217,218],"em",{},"extend the existing styles"," with your own CSS classes or custom properties. This is where the locally registered theme module comes in handy.",[40,221,222,223,226],{},"The layer automatically registers a Nuxt module that creates a CSS template accessible via the ",[50,224,225],{},"#nuxt-pastel-docs"," alias.",[228,229,231],"h4",{"id":230},"configuration-extending-theme-styles-usage","Usage",[63,233,234],{},[66,235,236],{},"Import the base theme styles in your own CSS file:",[76,238,241],{"language":239,"filename":240},"css","assets\u002Fcss\u002Fmain",[50,242,244],{"class":243},"language-css","@import \"#nuxt-pastel-docs\";",[63,246,247],{},[66,248,249,250],{},"Register your CSS in your ",[50,251,74],{},[76,253,254],{"language":78,"filename":79},[50,255,256],{"class":82},"export default defineNuxtConfig({\n  css: [\"~\u002Fassets\u002Fcss\u002Fmain.css\"],\n});",[153,258,32],{"id":31},[40,260,261],{},"If you really don't like my design choices (kind of defeats the entire purpose of using this project) — you can decide to roll out your own components and battle with keeping everything in balance.",[40,263,264,265,268],{},"The structure of the ",[50,266,267],{},"components"," directory is given below:",[270,271,278,282,677,740,782,1066],"tabs",{":tabs":272},[273,274,275,276,277],"app\u002F","content\u002F","og-image\u002F","ui\u002F","util\u002F",[279,280,281],null,{}," `app\u002F` tab ",[283,284,286,289,292,674],"template",{"name":285},"tab-1",[40,287,288],{},"This folder contains components that define sections in the theme.",[279,290,291],{}," Sub-tabs of app\u002F ",[270,293,303,381,536,623],{":icon":294,":tabs":297,"prefix":302},{"default":295,"active":296},"ph:file-duotone","ph:file-text-fill",[298,299,300,301],"Footer.vue","Header.vue","Navigation.vue","TableOfContents.vue","app-files",[283,304,306,311,319],{"name":305},"app-files-1",[307,308],"picture",{"alt":309,":media":310},"Visualization of the footer component","{ \"(width >= 48rem) and (prefers-color-scheme: dark)\": \"\u002Fimages\u002Fgetting-started\u002Fvisualization-footer-vue.dark.png\", \"(width >= 48rem) and (prefers-color-scheme: light)\": \"\u002Fimages\u002Fgetting-started\u002Fvisualization-footer-vue.png\", \"(width \u003C 48rem) and (prefers-color-scheme: dark) \": \"\u002Fimages\u002Fgetting-started\u002Fsmall\u002Fvisualization-footer-vue.dark.png\", \"(width \u003C 48rem) and (prefers-color-scheme: light) \": \"\u002Fimages\u002Fgetting-started\u002Fsmall\u002Fvisualization-footer-vue.png\" }",[40,312,313,316,317],{},[87,314,315],{},"Values"," used from ",[50,318,158],{},[320,321,322,338],"table",{},[323,324,325],"thead",{},[326,327,328,332,335],"tr",{},[329,330],"th",{"style":331},"text-align:left",[329,333,334],{"style":331},"Description",[329,336,337],{"style":331},"Type",[339,340,341,360],"tbody",{},[326,342,343,349,355],{},[344,345,346],"td",{"style":331},[50,347,348],{},"footer.content",[344,350,351,352],{"style":331},"This main content displayed in the ",[50,353,354],{},"\u003Cfooter>",[344,356,357],{"style":331},[50,358,359],{},"string",[326,361,362,367,372],{},[344,363,364],{"style":331},[50,365,366],{},"footer.iconLinks",[344,368,369,370],{"style":331},"These are the icon links are rendered in the ",[50,371,354],{},[344,373,374,377,378],{"style":331},[50,375,376],{},"GenericIconOrPhosphorIconNameWithWeight"," or ",[50,379,380],{},"Record\u003CGenericIconOrPhosphorIconNameWithWeight, string>",[283,382,384,388,392,436,442,501,507],{"name":383},"app-files-2",[307,385],{"alt":386,":media":387},"Visualization of the header component","{ \"(width >= 48rem) and (prefers-color-scheme: dark)\": \"\u002Fimages\u002Fgetting-started\u002Fvisualization-header-vue.dark.png\", \"(width >= 48rem) and (prefers-color-scheme: light)\": \"\u002Fimages\u002Fgetting-started\u002Fvisualization-header-vue.png\", \"(width \u003C 48rem) and (prefers-color-scheme: dark) \": \"\u002Fimages\u002Fgetting-started\u002Fsmall\u002Fvisualization-header-vue.dark.png\", \"(width \u003C 48rem) and (prefers-color-scheme: light) \": \"\u002Fimages\u002Fgetting-started\u002Fsmall\u002Fvisualization-header-vue.png\" }",[389,390,391],"blockquote",{},"Incase the picture didn't load",[320,393,394,403],{},[323,395,396],{},[326,397,398,401],{},[329,399,400],{"style":331},"Slots",[329,402,334],{"style":331},[339,404,405,415,425],{},[326,406,407,412],{},[344,408,409],{"style":331},[50,410,411],{},"#buttons",[344,413,414],{"style":331},"Use this to override the buttons rendered after the feature list.",[326,416,417,422],{},[344,418,419],{"style":331},[50,420,421],{},"#default",[344,423,424],{"style":331},"Use this to override both the headline and feature list.",[326,426,427,433],{},[344,428,429,432],{"style":331},[50,430,431],{},"#aside"," (Optional)",[344,434,435],{"style":331},"By default, it doesn't have default content, so the layout collapses to a single-column layout, else the layout is 2-columns.",[40,437,438,316,440],{},[87,439,315],{},[50,441,158],{},[320,443,444,454],{},[323,445,446],{},[326,447,448,450,452],{},[329,449],{},[329,451,334],{"style":331},[329,453,337],{"style":331},[339,455,456,469,483],{},[326,457,458,462,465],{},[344,459,460],{},[50,461,176],{},[344,463,464],{"style":331},"A headline\u002Ftagline.",[344,466,467],{"style":331},[50,468,359],{},[326,470,471,475,478],{},[344,472,473],{},[50,474,168],{},[344,476,477],{"style":331},"A feature list.",[344,479,480],{"style":331},[50,481,482],{},"string[]",[326,484,485,490,497],{},[344,486,487],{},[50,488,489],{},"repo",[344,491,492,493,496],{"style":331},"A string in the format, ",[50,494,495],{},"username\u002Frepo-name"," that's used for constructing repository links.",[344,498,499],{"style":331},[50,500,359],{},[40,502,503,506],{},[87,504,505],{},"Props"," provided by the component:",[320,508,509,519],{},[323,510,511],{},[326,512,513,515,517],{},[329,514],{"style":331},[329,516,334],{"style":331},[329,518,337],{"style":331},[339,520,521],{},[326,522,523,528,531],{},[344,524,525],{"style":331},[50,526,527],{},"classes",[344,529,530],{"style":331},"A property to override and merge CSS classes with the base styles",[344,532,533],{"style":331},[50,534,535],{},"Partial\u003C{ aside: ClassValue; default: ClassValue; }>",[283,537,539,543,545,588,594],{"name":538},"app-files-3",[307,540],{"alt":541,":media":542},"Visualization of the navigation component","{ \"(width >= 48rem) and (prefers-color-scheme: dark)\": \"\u002Fimages\u002Fgetting-started\u002Fvisualization-navigation-vue.dark.png\", \"(width >= 48rem) and (prefers-color-scheme: light)\": \"\u002Fimages\u002Fgetting-started\u002Fvisualization-navigation-vue.png\", \"(width \u003C 48rem) and (prefers-color-scheme: dark) \": \"\u002Fimages\u002Fgetting-started\u002Fsmall\u002Fvisualization-navigation-vue.dark.png\", \"(width \u003C 48rem) and (prefers-color-scheme: light) \": \"\u002Fimages\u002Fgetting-started\u002Fsmall\u002Fvisualization-navigation-vue.png\" }",[389,544,391],{},[320,546,547,555],{},[323,548,549],{},[326,550,551,553],{},[329,552,400],{"style":331},[329,554,334],{"style":331},[339,556,557,566,578],{},[326,558,559,563],{},[344,560,561],{"style":331},[50,562,411],{},[344,564,565],{"style":331},"Use this to override the actions shown in the navigation bar",[326,567,568,572],{},[344,569,570],{"style":331},[50,571,421],{},[344,573,574,575,577],{"style":331},"Use this to override contents of the navigation bar excluding that of the ",[50,576,411],{}," slot",[326,579,580,585],{},[344,581,582],{"style":331},[50,583,584],{},"#logo",[344,586,587],{"style":331},"Use this to override the branding shown in the navigation bar",[40,589,590,316,592],{},[87,591,315],{},[50,593,158],{},[320,595,596,606],{},[323,597,598],{},[326,599,600,602,604],{},[329,601],{"style":331},[329,603,334],{"style":331},[329,605,337],{"style":331},[339,607,608],{},[326,609,610,614,619],{},[344,611,612],{"style":331},[50,613,489],{},[344,615,492,616,618],{"style":331},[50,617,495],{}," that's used for in a request for the latest release.",[344,620,621],{"style":331},[50,622,359],{},[283,624,626,635,640,658,667],{"name":625},"app-files-4",[40,627,628,629,634],{},"An intelligent table of contents that automatically generates from your markdown headings. It's ",[87,630,631],{"class":214},[216,632,633],{},"context-aware"," and only shows when needed.",[40,636,637],{},[87,638,639],{},"Behavior:",[63,641,642,649,652,655],{},[66,643,644,645,648],{},"Only appears if ",[50,646,647],{},"displayToc: true"," is set in your page frontmatter",[66,650,651],{},"Only shows if there are actual headings in your content",[66,653,654],{},"Collapsible on mobile devices to save screen space",[66,656,657],{},"Scrollable when content overflows",[40,659,660,663,664,666],{},[87,661,662],{},"Requirements:","\nMake sure to add ",[50,665,647],{}," to your markdown frontmatter:",[76,668,670],{"language":669},"yaml",[50,671,673],{"class":672},"language-yaml","---\ndisplayToc: true\n---",[279,675,676],{}," `content\u002F` tab ",[283,678,680,688,693,702,707,737],{"name":679},"tab-2",[40,681,682,683,687],{},"These are overridden components from ",[55,684,686],{"href":685},"https:\u002F\u002Fgithub.com\u002Fnuxt-modules\u002Fmdc\u002Ftree\u002Fmain\u002Fsrc\u002Fruntime\u002Fcomponents\u002Fprose","@nuxtjs\u002Fmdc"," that provide enhanced styling for your markdown content.",[40,689,690],{},[87,691,692],{},"What's included:",[40,694,695,696,701],{},"The theme customizes prose components to match the ",[87,697,698],{"class":214},[216,699,700],{},"pastel aesthetic"," — think better typography, consistent spacing, and subtle color variations that don't hurt your eyes during those late-night documentation sessions.",[40,703,704],{},[87,705,706],{},"Components that are overridden:",[40,708,709,712,713,712,716,712,719,712,722,712,725,712,728,712,731,712,734],{},[50,710,711],{},"ProseH1"," ",[50,714,715],{},"ProseH2",[50,717,718],{},"ProseH3",[50,720,721],{},"ProseH4",[50,723,724],{},"ProseA",[50,726,727],{},"ProseCode",[50,729,730],{},"ProsePre",[50,732,733],{},"ProseOl",[50,735,736],{},"ProseLi",[279,738,739],{}," `og-image\u002F` tab ",[283,741,743,761,767,772,779],{"name":742},"tab-3",[40,744,745,746,750,751,755,756,760],{},"This folder contains only the ",[55,747,749],{"href":748},"https:\u002F\u002Fnuxtseo.com\u002Fdocs\u002Fog-image\u002Fguides\u002Fcommunity-templates","NuxtSeo"," community template from ",[55,752,754],{"href":753},"https:\u002F\u002Fnuxtseo.com\u002Fdocs\u002Fog-image\u002Fgetting-started\u002Fintroduction","nuxt-og-image"," as I enabled the ",[55,757,759],{"href":758},"https:\u002F\u002Fnuxtseo.com\u002Fdocs\u002Fog-image\u002Fguides\u002Fzero-runtime","zeroRuntime"," configuration.",[40,762,763,766],{},[87,764,765],{},"Why?"," — It's just for the love of the game.",[40,768,769],{},[87,770,771],{},"What does this mean?",[40,773,774,775],{},"If you don't like the default, you pretty much have to write your own SEO component yourself or pick from the ",[55,776,778],{"href":777},"https:\u002F\u002Fgithub.com\u002Fnuxt-modules\u002Fog-image\u002Ftree\u002Fmain\u002Fsrc\u002Fruntime\u002Fapp\u002Fcomponents\u002FTemplates\u002FCommunity","various templates",[279,780,781],{}," `ui\u002F` tab ",[283,783,785,788,791,1063],{"name":784},"tab-4",[40,786,787],{},"This folder contains components that do UI stuff.",[279,789,790],{}," Sub-tabs of ui\u002F ",[270,792,800,890,902,989],{":icon":793,":tabs":794,"prefix":799},{"default":295,"active":296},[795,796,797,798],"Button.vue","Icon.vue","SvglIcon.vue","Tabs.vue","ui-files",[283,801,803,806,811,817,820,827,832,872,877],{"name":802},"ui-files-1",[40,804,805],{},"A versatile button component that can transform into a link when needed. The current variants supported are:",[807,808],"button",{"icon":809,"label":810},"ph:target","I'm a target",[807,812],{":extra":813,"icon":814,"label":815,"variant":816},"true","ph:eyes","Do you trust me?","accent",[228,818,231],{"id":819},"configuration-overriding-components-usage",[76,821,823],{"language":822},"vue",[50,824,826],{"class":825},"language-vue","\u003CUiButton to=\"\u002Fdocs\" icon=\"ph:book-open\" variant=\"accent\">\nRead the docs\n\u003C\u002FUiButton>",[40,828,829],{},[87,830,831],{},"Props:",[63,833,834,840,857,866],{},[66,835,836,839],{},[50,837,838],{},"class"," — extra CSS classes that get merged with the base styling",[66,841,842,845,846,849,850,377,853,856],{},[50,843,844],{},"icon"," — choose an icon name supported by ",[50,847,848],{},"UiIcon"," (",[50,851,852],{},"@nuxt\u002Ficon",[50,854,855],{},"svgl:",")",[66,858,859,862,863],{},[50,860,861],{},"to"," — if present, converts the button to a ",[50,864,865],{},"NuxtLink",[66,867,868,871],{},[50,869,870],{},"variant"," — styling variant (default or accent)",[40,873,874],{},[87,875,876],{},"Slots:",[63,878,879,885],{},[66,880,881,884],{},[50,882,883],{},"default"," — the button text content",[66,886,887,889],{},[50,888,844],{}," — custom icon element to replace the default icon",[283,891,893,894,896,897,899,900,184],{"name":892},"ui-files-2","A shortcut to the component provided by ",[50,895,852],{}," that provides icons throughout your documentation. It also respects the ",[50,898,179],{}," remapping from ",[50,901,158],{},[283,903,905,913,918,948,952,969,972,977],{"name":904},"ui-files-3",[40,906,907,908,912],{},"A specialized icon component for rendering SVG icons from the ",[55,909,911],{"href":910},"https:\u002F\u002Fsvgl.app","SVGL"," registry. Perfect for displaying popular brand logos and icons that aren't available as regular Iconify icons.",[40,914,915],{},[87,916,917],{},"Features:",[63,919,920,926,932,938],{},[66,921,922,925],{},[87,923,924],{},"Remote icon fetching"," — automatically downloads SVG content from the SVGL API",[66,927,928,931],{},[87,929,930],{},"Error handling"," — gracefully handles missing icons with console warnings",[66,933,934,937],{},[87,935,936],{},"Consistent sizing"," — accepts a size prop to maintain visual consistency",[66,939,940,943,944,947],{},[87,941,942],{},"Smart fragment rendering"," — uses the ",[50,945,946],{},"UtilSvgFragment"," component for proper SVG display",[40,949,950],{},[87,951,831],{},[63,953,954,963],{},[66,955,956,959,960],{},[50,957,958],{},"name"," — the SVGL icon name (e.g., \"svgl:react\", \"svgl:vue\") ",[87,961,962],{},"(Required)",[66,964,965,968],{},[50,966,967],{},"size"," — icon dimensions in pixels (default: 20)",[228,970,231],{"id":971},"configuration-overriding-components-usage-1",[76,973,974],{"language":822},[50,975,976],{"class":825},"\u003CUiSvglIcon name=\"svgl:react\" :size=\"24\" \u002F>\n\u003CUiSvglIcon name=\"svgl:github\" \u002F>",[40,978,979,980,982,983,985,986,184],{},"Icons that start with ",[50,981,855],{}," in ",[50,984,366],{}," will automatically use this component instead of ",[50,987,988],{},"NuxtIcon",[283,990,992,1001,1005,1020,1029,1043,1046,1051,1056],{"name":991},"ui-files-4",[40,993,994,995,1000],{},"An interactive tabbed interface component that makes organizing content ",[87,996,997],{"class":214},[216,998,999],{},"effortless",". Perfect for showing code examples, configuration options, or any grouped content.",[40,1002,1003],{},[87,1004,831],{},[63,1006,1007,1014],{},[66,1008,1009,1011,1012],{},[50,1010,270],{}," — array of tab names ",[87,1013,962],{},[66,1015,1016,1019],{},[50,1017,1018],{},"prefix"," — optional prefix for slot names (useful for multiple tab components on the same page)",[40,1021,1022,1024,1025,1028],{},[87,1023,876],{},"\nThe component generates slots based on your tabs array. For tabs ",[50,1026,1027],{},"[\"One\", \"Two\"]",", you get:",[63,1030,1031,1037],{},[66,1032,1033,1036],{},[50,1034,1035],{},"#tab-1"," for \"One\"",[66,1038,1039,1042],{},[50,1040,1041],{},"#tab-2"," for \"Two\"",[228,1044,231],{"id":1045},"configuration-overriding-components-usage-2",[76,1047,1048],{"language":822},[50,1049,1050],{"class":825},"\u003Ctabs :tabs=\"['Setup', 'Usage', 'Advanced']\">\n\u003Ctemplate #tab-1>\n  Initial setup instructions...\n\u003C\u002Ftemplate>\n\u003Ctemplate #tab-2>\n  Basic usage examples...\n\u003C\u002Ftemplate>\n\u003Ctemplate #tab-3>\n  Advanced configuration...\n\u003C\u002Ftemplate>\n\u003C\u002Ftabs>",[40,1052,1053],{},[87,1054,1055],{},"With prefix (for markdown):",[76,1057,1059],{"language":1058},"md",[50,1060,1062],{"class":1061},"language-md","::tabs{:tabs=\"['Config', 'Code']\" prefix=\"example\"}\n#example-1\nConfiguration details...\n\n#example-2\nCode examples...\n::",[279,1064,1065],{}," `util\u002F` tab ",[283,1067,1069,1072,1075],{"name":1068},"tab-5",[40,1070,1071],{},"This folder contains utility components that support the functionality of other components.",[279,1073,1074],{}," Sub-tabs of util\u002F ",[270,1076,1081],{":icon":1077,":tabs":1078,"prefix":1080},{"default":295,"active":296},[1079],"SvgFragment.ts","util-files",[283,1082,1084,1091,1095,1120,1124,1134,1137,1142],{"name":1083},"util-files-1",[40,1085,1086,1087,1090],{},"A component that intelligently renders SVG content by parsing SVG strings and converting them to Vue virtual nodes. It's used internally by the ",[50,1088,1089],{},"SvglIcon"," component but can be handy for custom SVG rendering needs.",[40,1092,1093],{},[87,1094,917],{},[63,1096,1097,1103,1109,1114],{},[66,1098,1099,1102],{},[87,1100,1101],{},"SVG parsing"," — converts raw SVG strings into proper Vue components",[66,1104,1105,1108],{},[87,1106,1107],{},"Virtual node traversal"," — recursively processes SVG elements and text nodes",[66,1110,1111,1113],{},[87,1112,930],{}," — gracefully handles malformed SVG content with warnings",[66,1115,1116,1119],{},[87,1117,1118],{},"Prop inheritance"," — seamlessly passes through width, height, and other SVG attributes",[40,1121,1122],{},[87,1123,831],{},[63,1125,1126],{},[66,1127,1128,1131,1132],{},[50,1129,1130],{},"content"," — the raw SVG string to parse and render ",[87,1133,962],{},[228,1135,231],{"id":1136},"configuration-overriding-components-usage-3",[76,1138,1139],{"language":822},[50,1140,1141],{"class":825},"\u003CUtilSvgFragment\n  content=\"\u003Csvg>\u003Ccircle cx='10' cy='10' r='10' fill='blue' \u002F>\u003C\u002Fsvg>\"\n  :width=\"24\"\n  :height=\"24\"\n\u002F>",[40,1143,1144,1147,1148,1150],{},[87,1145,1146],{},"Note:"," This component is primarily used internally by ",[50,1149,1089],{}," but can be useful for rendering dynamic SVG content from APIs or user input.",{"title":38,"description":42},"# Get started\n\nI intend to run through through what I've created so you can start writing your own pastel themed documentation.\n\n## Quick start\n\nFor more information about `layers` I suggest you checkout this page — [Authoring Nuxt Layers](https:\u002F\u002Fnuxt.com\u002Fdocs\u002F4.x\u002Fguide\u002Fgoing-further\u002Flayers)\n\nFollow the steps below to have the base setup for your pastel themed documentation:\n\n- Create a new project — obviously.\n- Add the following to the `nuxt.config.ts`\n\n```ts [nuxt.config]\nexport default defineNuxtConfig({\n  extends: [[\"github:oyedejioyewole\u002Fnuxt-pastel-docs\", { install: true }]],\n});\n```\n\n**Info:** This command adds `nuxt-pastel-docs` as a remote layer and its installs dependencies.\n\n- Install [@nuxt\u002Fcontent](https:\u002F\u002Fcontent.nuxt.com) as a `dependency`\n\n**Info:** Apparently, if you don't install `@nuxt\u002Fcontent` it wouldn't be recognized in your project.\n\n- Create a `content.config.ts` with the following content:\n\n```ts [content.config]\nimport { defineContentConfig, defineCollection, z } from \"@nuxt\u002Fcontent\";\n\nexport default defineContentConfig({\n  collections: {\n    content: defineCollection({\n      type: \"page\",\n      source: \"**\u002F*.md\",\n      schema: z.object({\n        rawbody: z.string(),\n      }),\n    }),\n  },\n});\n```\n\n**Info:** This defines a schema where `rawbody` contains the raw Markdown content for each page.\n\nPerfect, now you can enjoy writing your documentation.\n\n## Configuration\n\nNow for the fun part, customization :sparkles:\n\n### Create an `app.config.ts`\n\nThrough the `pastelDocs` object, you can customize properties like the `features` list, the `themeColor`, the `headline`, the `iconMap`, and the footer `iconLinks`.\n\nI overrode the type inference for `defineAppConfig` and `useAppConfig` to include the `pastelDocs` object, so you can get type hints and auto-completion in your IDE.\n\nTo view the full list of properties you can customize, check out the [types\u002Fconfig.d.ts](..\u002F..\u002Ftypes\u002Fconfig.d.ts) file.\n\n### Extending theme styles\n\nIn cases you don't want to completely override components, you **_extend the existing styles_**{.font-cursive} with your own CSS classes or custom properties. This is where the locally registered theme module comes in handy.\n\nThe layer automatically registers a Nuxt module that creates a CSS template accessible via the `#nuxt-pastel-docs` alias.\n\n#### Usage\n\n- Import the base theme styles in your own CSS file:\n\n```css [assets\u002Fcss\u002Fmain]\n@import \"#nuxt-pastel-docs\";\n```\n\n- Register your CSS in your `nuxt.config.ts`\n\n```ts [nuxt.config]\nexport default defineNuxtConfig({\n  css: [\"~\u002Fassets\u002Fcss\u002Fmain.css\"],\n});\n```\n\n### Overriding components\n\nIf you really don't like my design choices (kind of defeats the entire purpose of using this project) — you can decide to roll out your own components and battle with keeping everything in balance.\n\nThe structure of the `components` directory is given below:\n\n::tabs{:tabs='[\"app\u002F\", \"content\u002F\", \"og-image\u002F\", \"ui\u002F\", \"util\u002F\"]' }\n\n\u003C!-- `app\u002F` tab -->\n\n#tab-1\nThis folder contains components that define sections in the theme.\n\n\u003C!-- Sub-tabs of app\u002F -->\n\n::tabs{:icon='{\"default\": \"ph:file-duotone\", \"active\": \"ph:file-text-fill\"}' :tabs='[\"Footer.vue\", \"Header.vue\", \"Navigation.vue\", \"TableOfContents.vue\"]' prefix=\"app-files\"}\n#app-files-1\n\n:picture{alt=\"Visualization of the footer component\" :media='{ \"(width >= 48rem) and (prefers-color-scheme: dark)\": \"\u002Fimages\u002Fgetting-started\u002Fvisualization-footer-vue.dark.png\", \"(width >= 48rem) and (prefers-color-scheme: light)\": \"\u002Fimages\u002Fgetting-started\u002Fvisualization-footer-vue.png\", \"(width \u003C 48rem) and (prefers-color-scheme: dark) \": \"\u002Fimages\u002Fgetting-started\u002Fsmall\u002Fvisualization-footer-vue.dark.png\", \"(width \u003C 48rem) and (prefers-color-scheme: light) \": \"\u002Fimages\u002Fgetting-started\u002Fsmall\u002Fvisualization-footer-vue.png\" }'}\n\n**Values** used from `app.config.ts`\n\n|                    | Description                                             | Type                                                                                                   |\n| :----------------- | :------------------------------------------------------ | :----------------------------------------------------------------------------------------------------- |\n| `footer.content`   | This main content displayed in the `\u003Cfooter>`           | `string`                                                                                               |\n| `footer.iconLinks` | These are the icon links are rendered in the `\u003Cfooter>` | `GenericIconOrPhosphorIconNameWithWeight` or `Record\u003CGenericIconOrPhosphorIconNameWithWeight, string>` |\n\n#app-files-2\n\n:picture{alt=\"Visualization of the header component\" :media='{ \"(width >= 48rem) and (prefers-color-scheme: dark)\": \"\u002Fimages\u002Fgetting-started\u002Fvisualization-header-vue.dark.png\", \"(width >= 48rem) and (prefers-color-scheme: light)\": \"\u002Fimages\u002Fgetting-started\u002Fvisualization-header-vue.png\", \"(width \u003C 48rem) and (prefers-color-scheme: dark) \": \"\u002Fimages\u002Fgetting-started\u002Fsmall\u002Fvisualization-header-vue.dark.png\", \"(width \u003C 48rem) and (prefers-color-scheme: light) \": \"\u002Fimages\u002Fgetting-started\u002Fsmall\u002Fvisualization-header-vue.png\" }'}\n\n> Incase the picture didn't load\n\n| Slots               | Description                                                                                                                   |\n| :------------------ | :---------------------------------------------------------------------------------------------------------------------------- |\n| `#buttons`          | Use this to override the buttons rendered after the feature list.                                                             |\n| `#default`          | Use this to override both the headline and feature list.                                                                      |\n| `#aside` (Optional) | By default, it doesn't have default content, so the layout collapses to a single-column layout, else the layout is 2-columns. |\n\n**Values** used from `app.config.ts`\n\n|            | Description                                                                                 | Type       |\n| ---------- | :------------------------------------------------------------------------------------------ | :--------- |\n| `headline` | A headline\u002Ftagline.                                                                         | `string`   |\n| `features` | A feature list.                                                                             | `string[]` |\n| `repo`     | A string in the format, `username\u002Frepo-name` that's used for constructing repository links. | `string`   |\n\n**Props** provided by the component:\n\n|           | Description                                                       | Type                                                   |\n| :-------- | :---------------------------------------------------------------- | :----------------------------------------------------- |\n| `classes` | A property to override and merge CSS classes with the base styles | `Partial\u003C{ aside: ClassValue; default: ClassValue; }>` |\n\n#app-files-3\n:picture{alt=\"Visualization of the navigation component\" :media='{ \"(width >= 48rem) and (prefers-color-scheme: dark)\": \"\u002Fimages\u002Fgetting-started\u002Fvisualization-navigation-vue.dark.png\", \"(width >= 48rem) and (prefers-color-scheme: light)\": \"\u002Fimages\u002Fgetting-started\u002Fvisualization-navigation-vue.png\", \"(width \u003C 48rem) and (prefers-color-scheme: dark) \": \"\u002Fimages\u002Fgetting-started\u002Fsmall\u002Fvisualization-navigation-vue.dark.png\", \"(width \u003C 48rem) and (prefers-color-scheme: light) \": \"\u002Fimages\u002Fgetting-started\u002Fsmall\u002Fvisualization-navigation-vue.png\" }'}\n\n> Incase the picture didn't load\n\n| Slots      | Description                                                                               |\n| :--------- | :---------------------------------------------------------------------------------------- |\n| `#buttons` | Use this to override the actions shown in the navigation bar                              |\n| `#default` | Use this to override contents of the navigation bar excluding that of the `#buttons` slot |\n| `#logo`    | Use this to override the branding shown in the navigation bar                             |\n\n**Values** used from `app.config.ts`\n\n|        | Description                                                                                       | Type     |\n| :----- | :------------------------------------------------------------------------------------------------ | :------- |\n| `repo` | A string in the format, `username\u002Frepo-name` that's used for in a request for the latest release. | `string` |\n\n#app-files-4\nAn intelligent table of contents that automatically generates from your markdown headings. It's **_context-aware_**{.font-cursive} and only shows when needed.\n\n**Behavior:**\n\n- Only appears if `displayToc: true` is set in your page frontmatter\n- Only shows if there are actual headings in your content\n- Collapsible on mobile devices to save screen space\n- Scrollable when content overflows\n\n**Requirements:**\nMake sure to add `displayToc: true` to your markdown frontmatter:\n\n```yaml\n---\ndisplayToc: true\n---\n```\n\n::\n\n\u003C!-- `content\u002F` tab -->\n\n#tab-2\nThese are overridden components from [@nuxtjs\u002Fmdc](https:\u002F\u002Fgithub.com\u002Fnuxt-modules\u002Fmdc\u002Ftree\u002Fmain\u002Fsrc\u002Fruntime\u002Fcomponents\u002Fprose) that provide enhanced styling for your markdown content.\n\n**What's included:**\n\nThe theme customizes prose components to match the **_pastel aesthetic_**{.font-cursive} — think better typography, consistent spacing, and subtle color variations that don't hurt your eyes during those late-night documentation sessions.\n\n**Components that are overridden:**\n\n`ProseH1` `ProseH2` `ProseH3` `ProseH4` `ProseA` `ProseCode` `ProsePre` `ProseOl` `ProseLi`\n\n\u003C!-- `og-image\u002F` tab -->\n\n#tab-3\n\nThis folder contains only the [NuxtSeo](https:\u002F\u002Fnuxtseo.com\u002Fdocs\u002Fog-image\u002Fguides\u002Fcommunity-templates) community template from [nuxt-og-image](https:\u002F\u002Fnuxtseo.com\u002Fdocs\u002Fog-image\u002Fgetting-started\u002Fintroduction) as I enabled the [zeroRuntime](https:\u002F\u002Fnuxtseo.com\u002Fdocs\u002Fog-image\u002Fguides\u002Fzero-runtime) configuration.\n\n**Why?** — It's just for the love of the game.\n\n**What does this mean?**\n\nIf you don't like the default, you pretty much have to write your own SEO component yourself or pick from the [various templates](https:\u002F\u002Fgithub.com\u002Fnuxt-modules\u002Fog-image\u002Ftree\u002Fmain\u002Fsrc\u002Fruntime\u002Fapp\u002Fcomponents\u002FTemplates\u002FCommunity)\n\n\u003C!-- `ui\u002F` tab -->\n\n#tab-4\nThis folder contains components that do UI stuff.\n\n\u003C!-- Sub-tabs of ui\u002F -->\n\n::tabs{:icon='{\"default\": \"ph:file-duotone\", \"active\": \"ph:file-text-fill\"}' :tabs='[\"Button.vue\", \"Icon.vue\", \"SvglIcon.vue\", \"Tabs.vue\"]' prefix=\"ui-files\"}\n\n#ui-files-1\nA versatile button component that can transform into a link when needed. The current variants supported are:\n\n:button{icon=\"ph:target\" label=\"I'm a target\"}\n:button{ extra icon=\"ph:eyes\" label=\"Do you trust me?\" variant=\"accent\"}\n\n#### Usage\n\n```vue\n\u003CUiButton to=\"\u002Fdocs\" icon=\"ph:book-open\" variant=\"accent\">\nRead the docs\n\u003C\u002FUiButton>\n```\n\n**Props:**\n\n- `class` — extra CSS classes that get merged with the base styling\n- `icon` — choose an icon name supported by `UiIcon` (`@nuxt\u002Ficon` or `svgl:`)\n- `to` — if present, converts the button to a `NuxtLink`\n- `variant` — styling variant (default or accent)\n\n**Slots:**\n\n- `default` — the button text content\n- `icon` — custom icon element to replace the default icon\n\n#ui-files-2\nA shortcut to the component provided by `@nuxt\u002Ficon` that provides icons throughout your documentation. It also respects the `iconMap` remapping from `app.config.ts`.\n\n#ui-files-3\nA specialized icon component for rendering SVG icons from the [SVGL](https:\u002F\u002Fsvgl.app) registry. Perfect for displaying popular brand logos and icons that aren't available as regular Iconify icons.\n\n**Features:**\n\n- **Remote icon fetching** — automatically downloads SVG content from the SVGL API\n- **Error handling** — gracefully handles missing icons with console warnings\n- **Consistent sizing** — accepts a size prop to maintain visual consistency\n- **Smart fragment rendering** — uses the `UtilSvgFragment` component for proper SVG display\n\n**Props:**\n\n- `name` — the SVGL icon name (e.g., \"svgl:react\", \"svgl:vue\") **(Required)**\n- `size` — icon dimensions in pixels (default: 20)\n\n#### Usage\n\n```vue\n\u003CUiSvglIcon name=\"svgl:react\" :size=\"24\" \u002F>\n\u003CUiSvglIcon name=\"svgl:github\" \u002F>\n```\n\nIcons that start with `svgl:` in `footer.iconLinks` will automatically use this component instead of `NuxtIcon`.\n\n#ui-files-4\nAn interactive tabbed interface component that makes organizing content **_effortless_**{.font-cursive}. Perfect for showing code examples, configuration options, or any grouped content.\n\n**Props:**\n\n- `tabs` — array of tab names **(Required)**\n- `prefix` — optional prefix for slot names (useful for multiple tab components on the same page)\n\n**Slots:**\nThe component generates slots based on your tabs array. For tabs `[\"One\", \"Two\"]`, you get:\n\n- `#tab-1` for \"One\"\n- `#tab-2` for \"Two\"\n\n#### Usage\n\n```vue\n\u003Ctabs :tabs=\"['Setup', 'Usage', 'Advanced']\">\n\u003Ctemplate #tab-1>\n  Initial setup instructions...\n\u003C\u002Ftemplate>\n\u003Ctemplate #tab-2>\n  Basic usage examples...\n\u003C\u002Ftemplate>\n\u003Ctemplate #tab-3>\n  Advanced configuration...\n\u003C\u002Ftemplate>\n\u003C\u002Ftabs>\n```\n\n**With prefix (for markdown):**\n\n```md\n::tabs{:tabs=\"['Config', 'Code']\" prefix=\"example\"}\n#example-1\nConfiguration details...\n\n#example-2\nCode examples...\n::\n```\n\n::\n\n\u003C!-- `util\u002F` tab -->\n\n#tab-5\nThis folder contains utility components that support the functionality of other components.\n\n\u003C!-- Sub-tabs of util\u002F -->\n\n::tabs{:icon='{\"default\": \"ph:file-duotone\", \"active\": \"ph:file-text-fill\"}' :tabs='[\"SvgFragment.ts\"]' prefix=\"util-files\"}\n\n#util-files-1\nA component that intelligently renders SVG content by parsing SVG strings and converting them to Vue virtual nodes. It's used internally by the `SvglIcon` component but can be handy for custom SVG rendering needs.\n\n**Features:**\n\n- **SVG parsing** — converts raw SVG strings into proper Vue components\n- **Virtual node traversal** — recursively processes SVG elements and text nodes\n- **Error handling** — gracefully handles malformed SVG content with warnings\n- **Prop inheritance** — seamlessly passes through width, height, and other SVG attributes\n\n**Props:**\n\n- `content` — the raw SVG string to parse and render **(Required)**\n\n#### Usage\n\n```vue\n\u003CUtilSvgFragment\n  content=\"\u003Csvg>\u003Ccircle cx='10' cy='10' r='10' fill='blue' \u002F>\u003C\u002Fsvg>\"\n  :width=\"24\"\n  :height=\"24\"\n\u002F>\n```\n\n**Note:** This component is primarily used internally by `SvglIcon` but can be useful for rendering dynamic SVG content from APIs or user input.\n::\n\n::\n",{"left":4,"top":4,"width":1154,"height":1154,"rotate":4,"vFlip":6,"hFlip":6,"body":1155},256,"\u003Cg fill=\"currentColor\">\u003Cpath d=\"M216 116.69V216h-64v-64h-48v64H40v-99.31l82.34-82.35a8 8 0 0 1 11.32 0Z\" opacity=\".2\"\u002F>\u003Cpath d=\"M240 208h-16v-72l2.34 2.34A8 8 0 0 0 237.66 127l-98.35-98.32a16 16 0 0 0-22.62 0L18.34 127a8 8 0 0 0 11.32 11.31L32 136v72H16a8 8 0 0 0 0 16h224a8 8 0 0 0 0-16M48 120l80-80l80 80v88h-48v-56a8 8 0 0 0-8-8h-48a8 8 0 0 0-8 8v56H48Zm96 88h-32v-48h32Z\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":1154,"height":1154,"rotate":4,"vFlip":6,"hFlip":6,"body":1157},"\u003Cpath fill=\"currentColor\" d=\"m213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32\"\u002F>",{"left":4,"top":4,"width":1154,"height":1154,"rotate":4,"vFlip":6,"hFlip":6,"body":1159},"\u003Cpath fill=\"currentColor\" d=\"M165.66 202.34a8 8 0 0 1-11.32 11.32l-80-80a8 8 0 0 1 0-11.32l80-80a8 8 0 0 1 11.32 11.32L91.31 128Z\"\u002F>",{"left":4,"top":4,"width":1154,"height":1154,"rotate":4,"vFlip":6,"hFlip":6,"body":1161},"\u003Cg fill=\"currentColor\">\u003Cpath d=\"M208 88v24H69.77a8 8 0 0 0-7.59 5.47L32 208V64a8 8 0 0 1 8-8h53.33a8 8 0 0 1 4.8 1.6L128 80h72a8 8 0 0 1 8 8\" opacity=\".2\"\u002F>\u003Cpath d=\"M245 110.64a16 16 0 0 0-13-6.64h-16V88a16 16 0 0 0-16-16h-69.33l-27.73-20.8a16.14 16.14 0 0 0-9.6-3.2H40a16 16 0 0 0-16 16v144a8 8 0 0 0 8 8h179.1a8 8 0 0 0 7.59-5.47l28.49-85.47a16.05 16.05 0 0 0-2.18-14.42M93.34 64l29.86 22.4A8 8 0 0 0 128 88h72v16H69.77a16 16 0 0 0-15.18 10.94L40 158.7V64Zm112 136H43.1l26.67-80H232Z\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":1154,"height":1154,"rotate":4,"vFlip":6,"hFlip":6,"body":1163},"\u003Cpath fill=\"currentColor\" d=\"m181.66 133.66l-80 80a8 8 0 0 1-11.32-11.32L164.69 128L90.34 53.66a8 8 0 0 1 11.32-11.32l80 80a8 8 0 0 1 0 11.32\"\u002F>",{"left":4,"top":4,"width":1154,"height":1154,"rotate":4,"vFlip":6,"hFlip":6,"body":1165},"\u003Cg fill=\"currentColor\">\u003Cpath d=\"M208 48v168a8 8 0 0 1-8 8H56a8 8 0 0 1-8-8V48a8 8 0 0 1 8-8h40a39.83 39.83 0 0 0-8 24v8h80v-8a39.83 39.83 0 0 0-8-24h40a8 8 0 0 1 8 8\" opacity=\".2\"\u002F>\u003Cpath d=\"M200 32h-36.26a47.92 47.92 0 0 0-71.48 0H56a16 16 0 0 0-16 16v168a16 16 0 0 0 16 16h144a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16m-72 0a32 32 0 0 1 32 32H96a32 32 0 0 1 32-32m72 184H56V48h26.75A47.9 47.9 0 0 0 80 64v8a8 8 0 0 0 8 8h80a8 8 0 0 0 8-8v-8a47.9 47.9 0 0 0-2.75-16H200Z\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":1154,"height":1154,"rotate":4,"vFlip":6,"hFlip":6,"body":1167},"\u003Cpath fill=\"currentColor\" d=\"M240 88.23a54.43 54.43 0 0 1-16 37L189.25 160a54.27 54.27 0 0 1-38.63 16h-.05A54.63 54.63 0 0 1 96 119.84a8 8 0 0 1 16 .45A38.62 38.62 0 0 0 150.58 160a38.4 38.4 0 0 0 27.31-11.31l34.75-34.75a38.63 38.63 0 0 0-54.63-54.63l-11 11A8 8 0 0 1 135.7 59l11-11a54.65 54.65 0 0 1 77.3 0a54.86 54.86 0 0 1 16 40.23m-131 97.43l-11 11A38.4 38.4 0 0 1 70.6 208a38.63 38.63 0 0 1-27.29-65.94L78 107.31a38.63 38.63 0 0 1 66 28.4a8 8 0 0 0 16 .45A54.86 54.86 0 0 0 144 96a54.65 54.65 0 0 0-77.27 0L32 130.75A54.62 54.62 0 0 0 70.56 224a54.28 54.28 0 0 0 38.64-16l11-11a8 8 0 0 0-11.2-11.34\"\u002F>",{"left":4,"top":4,"width":1154,"height":1154,"rotate":4,"vFlip":6,"hFlip":6,"body":1169},"\u003Cpath fill=\"currentColor\" d=\"M245 110.64a16 16 0 0 0-13-6.64h-16V88a16 16 0 0 0-16-16h-69.33l-27.73-20.8a16.14 16.14 0 0 0-9.6-3.2H40a16 16 0 0 0-16 16v144a8 8 0 0 0 8 8h179.1a8 8 0 0 0 7.59-5.47l28.49-85.47a16.05 16.05 0 0 0-2.18-14.42M93.34 64l29.86 22.4A8 8 0 0 0 128 88h72v16H69.77a16 16 0 0 0-15.18 10.94L40 158.7V64Z\"\u002F>",{"left":4,"top":4,"width":1154,"height":1154,"rotate":4,"vFlip":6,"hFlip":6,"body":1171},"\u003Cg fill=\"currentColor\">\u003Cpath d=\"M128 80H32V56a8 8 0 0 1 8-8h52.69a8 8 0 0 1 5.65 2.34Z\" opacity=\".2\"\u002F>\u003Cpath d=\"M216 72h-84.69L104 44.69A15.86 15.86 0 0 0 92.69 40H40a16 16 0 0 0-16 16v144.62A15.4 15.4 0 0 0 39.38 216h177.51A15.13 15.13 0 0 0 232 200.89V88a16 16 0 0 0-16-16M92.69 56l16 16H40V56ZM216 200H40V88h176Z\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":1154,"height":1154,"rotate":4,"vFlip":6,"hFlip":6,"body":1173},"\u003Cpath fill=\"currentColor\" d=\"m213.66 82.34l-56-56A8 8 0 0 0 152 24H56a16 16 0 0 0-16 16v176a16 16 0 0 0 16 16h144a16 16 0 0 0 16-16V88a8 8 0 0 0-2.34-5.66M160 176H96a8 8 0 0 1 0-16h64a8 8 0 0 1 0 16m0-32H96a8 8 0 0 1 0-16h64a8 8 0 0 1 0 16m-8-56V44l44 44Z\"\u002F>",{"left":4,"top":4,"width":1154,"height":1154,"rotate":4,"vFlip":6,"hFlip":6,"body":1175},"\u003Cg fill=\"currentColor\">\u003Cpath d=\"M208 88h-56V32Z\" opacity=\".2\"\u002F>\u003Cpath d=\"m213.66 82.34l-56-56A8 8 0 0 0 152 24H56a16 16 0 0 0-16 16v176a16 16 0 0 0 16 16h144a16 16 0 0 0 16-16V88a8 8 0 0 0-2.34-5.66M160 51.31L188.69 80H160ZM200 216H56V40h88v48a8 8 0 0 0 8 8h48z\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":1154,"height":1154,"rotate":4,"vFlip":6,"hFlip":6,"body":1177},"\u003Cpath fill=\"currentColor\" d=\"M218.29 182.17a12 12 0 0 1-16.47 4.12L140 149.19V216a12 12 0 0 1-24 0v-66.81l-61.82 37.1a12 12 0 1 1-12.35-20.58L104.68 128L41.83 90.29a12 12 0 1 1 12.35-20.58l61.82 37.1V40a12 12 0 0 1 24 0v66.81l61.82-37.1a12 12 0 1 1 12.35 20.58L151.32 128l62.85 37.71a12 12 0 0 1 4.12 16.46\"\u002F>",{"left":4,"top":4,"width":1154,"height":1154,"rotate":4,"vFlip":6,"hFlip":6,"body":1179},"\u003Cpath fill=\"currentColor\" d=\"M228 128a100 100 0 0 1-200 0c0-39.4 22.9-75.37 58.33-91.63a4 4 0 1 1 3.34 7.27C57.07 58.6 36 91.71 36 128a92 92 0 0 0 184 0c0-36.29-21.07-69.4-53.67-84.36a4 4 0 1 1 3.34-7.27C205.1 52.63 228 88.6 228 128\"\u002F>",{"left":4,"top":4,"width":1154,"height":1154,"rotate":4,"vFlip":6,"hFlip":6,"body":1181},"\u003Cg fill=\"currentColor\">\u003Cpath d=\"M224 64v88H32V64a16 16 0 0 1 16-16h160a16 16 0 0 1 16 16\" opacity=\".2\"\u002F>\u003Cpath d=\"M208 40H48a24 24 0 0 0-24 24v112a24 24 0 0 0 24 24h72v16H96a8 8 0 0 0 0 16h64a8 8 0 0 0 0-16h-24v-16h72a24 24 0 0 0 24-24V64a24 24 0 0 0-24-24M48 56h160a8 8 0 0 1 8 8v80H40V64a8 8 0 0 1 8-8m160 128H48a8 8 0 0 1-8-8v-16h176v16a8 8 0 0 1-8 8\"\u002F>\u003C\u002Fg>",1784234658533]