[{"data":1,"prerenderedAt":4586},["ShallowReactive",2],{"navigation_docs":3,"-laioutr-ui-ui-kit-general-media":1905,"-laioutr-ui-ui-kit-general-media-surround":4088,"changelog-data":4093,"didYouMean--Media":4124,"/laioutr-ui/ui-kit/general/media-MediaComponent-2.4.0-0-note":4125,"/laioutr-ui/ui-kit/general/media-MediaComponent-2.3.0-1-note":4282,"/laioutr-ui/ui-kit/general/media-alt-description":4437,"/laioutr-ui/ui-kit/general/media-aspectRatio-description":4446,"/laioutr-ui/ui-kit/general/media-sizes-description":4479,"/laioutr-ui/ui-kit/general/media-retina-description":4493,"/laioutr-ui/ui-kit/general/media-width-description":4507,"/laioutr-ui/ui-kit/general/media-height-description":4516,"/laioutr-ui/ui-kit/general/media-loading-description":4525,"/laioutr-ui/ui-kit/general/media-preload-description":4539,"/laioutr-ui/ui-kit/general/media-fetchpriority-description":4556,"/laioutr-ui/ui-kit/general/media-desktopBreakpoint-description":4577},[4,136,463,647,1532,1622,1628,1634,1693,1792],{"title":5,"path":6,"stem":7,"children":8},"Getting Started","/getting-started","0.getting-started/0.index",[9,10,14,18,56,81,115,132],{"title":5,"path":6,"stem":7},{"title":11,"path":12,"stem":13},"Starting new project","/getting-started/starting-new-project","0.getting-started/1.starting-new-project",{"title":15,"path":16,"stem":17},"What is Laioutr?","/getting-started/what-is-laioutr","0.getting-started/2.what-is-laioutr",{"title":19,"path":20,"stem":21,"children":22,"page":55},"Key Concepts","/getting-started/key-concepts","0.getting-started/3.key-concepts",[23,27,31,35,39,43,47,51],{"title":24,"path":25,"stem":26},"Architecture","/getting-started/key-concepts/architecture","0.getting-started/3.key-concepts/1.architecture",{"title":28,"path":29,"stem":30},"Data Model","/getting-started/key-concepts/data-model","0.getting-started/3.key-concepts/2.data-model",{"title":32,"path":33,"stem":34},"Internationalization","/getting-started/key-concepts/5.internationalization","0.getting-started/3.key-concepts/3.5.internationalization",{"title":36,"path":37,"stem":38},"Data Flow","/getting-started/key-concepts/data-flow","0.getting-started/3.key-concepts/3.data-flow",{"title":40,"path":41,"stem":42},"Extensibility","/getting-started/key-concepts/extensibility","0.getting-started/3.key-concepts/4.extensibility",{"title":44,"path":45,"stem":46},"Philosophy","/getting-started/key-concepts/philosophy","0.getting-started/3.key-concepts/5.philosophy",{"title":48,"path":49,"stem":50},"CI/CD Pipeline","/getting-started/key-concepts/ci-cd-pipeline","0.getting-started/3.key-concepts/6.ci-cd-pipeline",{"title":52,"path":53,"stem":54},"Multi-tenancy","/getting-started/key-concepts/multi-tenancy","0.getting-started/3.key-concepts/multi-tenancy",false,{"title":57,"path":58,"stem":59,"children":60,"page":55},"Next Steps","/getting-started/next-steps","0.getting-started/4.next-steps",[61,65,69,73,77],{"title":62,"path":63,"stem":64},"Create Organization and Project","/getting-started/next-steps/create-org-and-project","0.getting-started/4.next-steps/0.create-org-and-project",{"title":66,"path":67,"stem":68},"First Project Configuration","/getting-started/next-steps/first-project-config","0.getting-started/4.next-steps/1.first-project-config",{"title":70,"path":71,"stem":72},"Setup Local Development Environment","/getting-started/next-steps/local-setup","0.getting-started/4.next-steps/3.local-setup",{"title":74,"path":75,"stem":76},"Create your first custom app","/getting-started/next-steps/create-custom-app","0.getting-started/4.next-steps/4.create-custom-app",{"title":78,"path":79,"stem":80},"CLI","/getting-started/next-steps/cli","0.getting-started/4.next-steps/5.cli",{"title":82,"path":83,"stem":84,"children":85},"Changelogs","/getting-started/changelogs","0.getting-started/5.Changelogs/0.index",[86,87,91,95,99,103,107,111],{"title":82,"path":83,"stem":84},{"title":88,"path":89,"stem":90},"Canonical Types Changelog","/getting-started/changelogs/canonical-types-changelog","0.getting-started/5.Changelogs/canonical-types-changelog",{"title":92,"path":93,"stem":94},"CLI Changelog","/getting-started/changelogs/cli-changelog","0.getting-started/5.Changelogs/cli-changelog",{"title":96,"path":97,"stem":98},"Cockpit Changelog","/getting-started/changelogs/cockpit-changelog","0.getting-started/5.Changelogs/cockpit-changelog",{"title":100,"path":101,"stem":102},"Figma Kit Changelog","/getting-started/changelogs/figma-kit-changelog","0.getting-started/5.Changelogs/figma-kit-changelog",{"title":104,"path":105,"stem":106},"Frontend Changelog","/getting-started/changelogs/frontend-changelog","0.getting-started/5.Changelogs/frontend-changelog",{"title":108,"path":109,"stem":110},"Orchestr Changelog","/getting-started/changelogs/orchestr-changelog","0.getting-started/5.Changelogs/orchestr-changelog",{"title":112,"path":113,"stem":114},"UI Changelog","/getting-started/changelogs/ui-changelog","0.getting-started/5.Changelogs/ui-changelog",{"title":116,"path":117,"stem":118,"children":119,"page":55},"Hints And Tips","/getting-started/hints-and-tips","0.getting-started/6.Hints-and-Tips",[120,124,128],{"title":121,"path":122,"stem":123},"Introduction","/getting-started/hints-and-tips/introduction","0.getting-started/6.Hints-and-Tips/0.introduction",{"title":125,"path":126,"stem":127},"Developer tools","/getting-started/hints-and-tips/developer-tools","0.getting-started/6.Hints-and-Tips/1.developer-tools",{"title":129,"path":130,"stem":131},"Claude Code plugin","/getting-started/hints-and-tips/claude-marketplace","0.getting-started/6.Hints-and-Tips/2.claude-marketplace",{"title":133,"path":134,"stem":135},"MCP Server","/getting-started/mcp-server","0.getting-started/7.mcp-server",{"title":137,"path":138,"stem":139,"children":140},"Frontend","/frontend","1.Frontend/0.index",[141,142,153,215,241,305],{"title":137,"path":138,"stem":139},{"title":121,"path":143,"stem":144,"children":145,"page":55},"/frontend/introduction","1.Frontend/1.Introduction",[146,149],{"title":19,"path":147,"stem":148},"/frontend/introduction/key-concepts","1.Frontend/1.Introduction/0.key-concepts",{"title":150,"path":151,"stem":152},"Tech Stack","/frontend/introduction/tech-stack","1.Frontend/1.Introduction/1.tech-stack",{"title":154,"path":155,"stem":156,"children":157},"Features","/frontend/features","1.Frontend/2.Features/0.index",[158,159,163,167,171,175,179,183,187,191,195,199,203,207,211],{"title":154,"path":155,"stem":156},{"title":160,"path":161,"stem":162},"Consent Management","/frontend/features/consent-management","1.Frontend/2.Features/consent-management",{"title":164,"path":165,"stem":166},"Currencies","/frontend/features/currencies","1.Frontend/2.Features/currencies",{"title":168,"path":169,"stem":170},"Environments & Staging","/frontend/features/environments","1.Frontend/2.Features/environments",{"title":172,"path":173,"stem":174},"Hooks","/frontend/features/hooks","1.Frontend/2.Features/hooks",{"title":176,"path":177,"stem":178},"Media and Media Library","/frontend/features/media","1.Frontend/2.Features/media",{"title":180,"path":181,"stem":182},"Multi-language Support","/frontend/features/multi-language-support","1.Frontend/2.Features/multi-language-support",{"title":184,"path":185,"stem":186},"Multi-market","/frontend/features/multi-market","1.Frontend/2.Features/multi-market",{"title":188,"path":189,"stem":190},"Page Types","/frontend/features/pagetypes","1.Frontend/2.Features/pagetypes",{"title":192,"path":193,"stem":194},"PWA","/frontend/features/pwa","1.Frontend/2.Features/pwa",{"title":196,"path":197,"stem":198},"Redirects","/frontend/features/redirects","1.Frontend/2.Features/redirects",{"title":200,"path":201,"stem":202},"Routing","/frontend/features/routing","1.Frontend/2.Features/routing",{"title":204,"path":205,"stem":206},"Server-Side Rendering (SSR) and Caching","/frontend/features/ssr-and-caching","1.Frontend/2.Features/ssr-and-caching",{"title":208,"path":209,"stem":210},"Tracking","/frontend/features/tracking","1.Frontend/2.Features/tracking",{"title":212,"path":213,"stem":214},"Z-Ordering","/frontend/features/z-ordering","1.Frontend/2.Features/z-ordering",{"title":216,"path":217,"stem":218,"children":219},"SEO","/frontend/seo","1.Frontend/3.SEO/0.index",[220,221,225,229,233,237],{"title":216,"path":217,"stem":218},{"title":222,"path":223,"stem":224},"Link Checker","/frontend/seo/link-checker","1.Frontend/3.SEO/link-checker",{"title":226,"path":227,"stem":228},"OG Image","/frontend/seo/og-image","1.Frontend/3.SEO/og-image",{"title":230,"path":231,"stem":232},"Robots.txt","/frontend/seo/robots-txt","1.Frontend/3.SEO/robots-txt",{"title":234,"path":235,"stem":236},"Schema.org","/frontend/seo/schema-org","1.Frontend/3.SEO/schema-org",{"title":238,"path":239,"stem":240},"Sitemap","/frontend/seo/sitemap","1.Frontend/3.SEO/sitemap",{"title":242,"path":243,"stem":244,"children":245},"Backend for Frontend","/frontend/orchestr","1.Frontend/4.Orchestr/0.index",[246,247,273,277,281,285,289,293,297,301],{"title":242,"path":243,"stem":244},{"title":248,"path":249,"stem":250,"children":251},"Recipes","/frontend/orchestr/recipes","1.Frontend/4.Orchestr/99.recipes/0.index",[252,253,257,261,265,269],{"title":248,"path":249,"stem":250},{"title":254,"path":255,"stem":256},"Analytics components from query handlers","/frontend/orchestr/recipes/analytics-from-query-handlers","1.Frontend/4.Orchestr/99.recipes/analytics-from-query-handlers",{"title":258,"path":259,"stem":260},"Identity cookies (cart and visitor IDs)","/frontend/orchestr/recipes/identity-cookies","1.Frontend/4.Orchestr/99.recipes/identity-cookies",{"title":262,"path":263,"stem":264},"System bootstrap in extendRequest","/frontend/orchestr/recipes/system-bootstrap","1.Frontend/4.Orchestr/99.recipes/system-bootstrap",{"title":266,"path":267,"stem":268},"Translating vendor errors","/frontend/orchestr/recipes/translating-vendor-errors","1.Frontend/4.Orchestr/99.recipes/translating-vendor-errors",{"title":270,"path":271,"stem":272},"Userland cache patterns","/frontend/orchestr/recipes/userland-cache-patterns","1.Frontend/4.Orchestr/99.recipes/userland-cache-patterns",{"title":274,"path":275,"stem":276},"Actions","/frontend/orchestr/actions","1.Frontend/4.Orchestr/Actions",{"title":278,"path":279,"stem":280},"Caching","/frontend/orchestr/caching","1.Frontend/4.Orchestr/Caching",{"title":282,"path":283,"stem":284},"Middleware","/frontend/orchestr/middleware","1.Frontend/4.Orchestr/Middleware",{"title":286,"path":287,"stem":288},"Queries & Links","/frontend/orchestr/queries","1.Frontend/4.Orchestr/Queries",{"title":290,"path":291,"stem":292},"Component Resolvers","/frontend/orchestr/component-resolvers","1.Frontend/4.Orchestr/component-resolvers",{"title":294,"path":295,"stem":296},"Filters","/frontend/orchestr/filters","1.Frontend/4.Orchestr/filters",{"title":298,"path":299,"stem":300},"URL Query Parameters","/frontend/orchestr/url-query-params","1.Frontend/4.Orchestr/url-query-params",{"title":302,"path":303,"stem":304},"Orchestr Wire Format","/frontend/orchestr/wire-format","1.Frontend/4.Orchestr/wire-format",{"title":306,"path":307,"stem":308,"children":309},"API Reference","/frontend/api-reference","1.Frontend/99.api-reference/0.index",[310,311,373,376,406,422,430,441,449,456],{"title":306,"path":307,"stem":308},{"title":312,"path":313,"stem":314,"children":315},"Entities","/frontend/api-reference/entities","1.Frontend/99.api-reference/01.entities/0.index",[316,317,321,325,329,333,337,341,345,349,353,357,361,365,369],{"title":312,"path":313,"stem":314},{"title":318,"path":319,"stem":320},"Product","/frontend/api-reference/entities/product","1.Frontend/99.api-reference/01.entities/1.product",{"title":322,"path":323,"stem":324},"SuggestedSearch","/frontend/api-reference/entities/suggested-search","1.Frontend/99.api-reference/01.entities/10.suggested-search",{"title":326,"path":327,"stem":328},"SuggestedSearchEntry","/frontend/api-reference/entities/suggested-search-entry","1.Frontend/99.api-reference/01.entities/11.suggested-search-entry",{"title":330,"path":331,"stem":332},"BlogCollection","/frontend/api-reference/entities/blog-collection","1.Frontend/99.api-reference/01.entities/12.blog-collection",{"title":334,"path":335,"stem":336},"Comment","/frontend/api-reference/entities/comment","1.Frontend/99.api-reference/01.entities/13.comment",{"title":338,"path":339,"stem":340},"Location","/frontend/api-reference/entities/location","1.Frontend/99.api-reference/01.entities/14.location",{"title":342,"path":343,"stem":344},"ProductVariant","/frontend/api-reference/entities/product-variant","1.Frontend/99.api-reference/01.entities/2.product-variant",{"title":346,"path":347,"stem":348},"Category","/frontend/api-reference/entities/category","1.Frontend/99.api-reference/01.entities/3.category",{"title":350,"path":351,"stem":352},"Cart","/frontend/api-reference/entities/cart","1.Frontend/99.api-reference/01.entities/4.cart",{"title":354,"path":355,"stem":356},"CartItem","/frontend/api-reference/entities/cart-item","1.Frontend/99.api-reference/01.entities/5.cart-item",{"title":358,"path":359,"stem":360},"Review","/frontend/api-reference/entities/review","1.Frontend/99.api-reference/01.entities/6.review",{"title":362,"path":363,"stem":364},"BreadcrumbItem","/frontend/api-reference/entities/breadcrumb-item","1.Frontend/99.api-reference/01.entities/7.breadcrumb-item",{"title":366,"path":367,"stem":368},"MenuItem","/frontend/api-reference/entities/menu-item","1.Frontend/99.api-reference/01.entities/8.menu-item",{"title":370,"path":371,"stem":372},"BlogPost","/frontend/api-reference/entities/blog-post","1.Frontend/99.api-reference/01.entities/9.blog-post",{"title":188,"path":374,"stem":375},"/frontend/api-reference/page-types","1.Frontend/99.api-reference/02.page-types",{"title":377,"path":378,"stem":379,"children":380},"Common Types","/frontend/api-reference/common-types","1.Frontend/99.api-reference/03.common-types/0.index",[381,382,386,390,394,398,402],{"title":377,"path":378,"stem":379},{"title":383,"path":384,"stem":385},"Link","/frontend/api-reference/common-types/link","1.Frontend/99.api-reference/03.common-types/1.link",{"title":387,"path":388,"stem":389},"Media","/frontend/api-reference/common-types/media","1.Frontend/99.api-reference/03.common-types/2.media",{"title":391,"path":392,"stem":393},"Money","/frontend/api-reference/common-types/money","1.Frontend/99.api-reference/03.common-types/3.money",{"title":395,"path":396,"stem":397},"UnitPrice","/frontend/api-reference/common-types/unit-price","1.Frontend/99.api-reference/03.common-types/4.unit-price",{"title":399,"path":400,"stem":401},"Measurement","/frontend/api-reference/common-types/measurement","1.Frontend/99.api-reference/03.common-types/5.measurement",{"title":403,"path":404,"stem":405},"Opening Hours","/frontend/api-reference/common-types/opening-hours","1.Frontend/99.api-reference/03.common-types/6.opening-hours",{"title":407,"path":408,"stem":409,"children":410,"page":55},"Ecommerce","/frontend/api-reference/ecommerce","1.Frontend/99.api-reference/10.ecommerce",[411,414,418],{"title":274,"path":412,"stem":413},"/frontend/api-reference/ecommerce/actions","1.Frontend/99.api-reference/10.ecommerce/1.actions",{"title":415,"path":416,"stem":417},"Queries","/frontend/api-reference/ecommerce/queries","1.Frontend/99.api-reference/10.ecommerce/2.queries",{"title":419,"path":420,"stem":421},"Errors","/frontend/api-reference/ecommerce/errors","1.Frontend/99.api-reference/10.ecommerce/3.errors",{"title":423,"path":424,"stem":425,"children":426,"page":55},"Newsletter","/frontend/api-reference/newsletter","1.Frontend/99.api-reference/11.newsletter",[427],{"title":274,"path":428,"stem":429},"/frontend/api-reference/newsletter/actions","1.Frontend/99.api-reference/11.newsletter/1.actions",{"title":431,"path":432,"stem":433,"children":434,"page":55},"Blog","/frontend/api-reference/blog","1.Frontend/99.api-reference/12.blog",[435,438],{"title":415,"path":436,"stem":437},"/frontend/api-reference/blog/queries","1.Frontend/99.api-reference/12.blog/1.queries",{"title":419,"path":439,"stem":440},"/frontend/api-reference/blog/errors","1.Frontend/99.api-reference/12.blog/2.errors",{"title":442,"path":443,"stem":444,"children":445,"page":55},"Suggested Search","/frontend/api-reference/suggested-search","1.Frontend/99.api-reference/13.suggested-search",[446],{"title":415,"path":447,"stem":448},"/frontend/api-reference/suggested-search/queries","1.Frontend/99.api-reference/13.suggested-search/1.queries",{"title":208,"path":450,"stem":451,"children":452,"page":55},"/frontend/api-reference/tracking","1.Frontend/99.api-reference/14.tracking",[453],{"title":274,"path":454,"stem":455},"/frontend/api-reference/tracking/actions","1.Frontend/99.api-reference/14.tracking/1.actions",{"title":338,"path":457,"stem":458,"children":459,"page":55},"/frontend/api-reference/location","1.Frontend/99.api-reference/15.location",[460],{"title":415,"path":461,"stem":462},"/frontend/api-reference/location/queries","1.Frontend/99.api-reference/15.location/1.queries",{"title":464,"path":465,"stem":466,"children":467},"Apps","/apps","2.Apps/0.index",[468,469,545,631],{"title":464,"path":465,"stem":466},{"title":470,"path":471,"stem":472,"children":473},"App Development","/apps/app-development","2.Apps/app-development/0.index",[474,475,497,501,505,509,513,517,521,525,529,533,537,541],{"title":470,"path":471,"stem":472},{"title":476,"path":477,"stem":478,"children":479},"Guides","/apps/app-development/guides","2.Apps/app-development/99.guides/0.index",[480,481,485,489,493],{"title":476,"path":477,"stem":478},{"title":482,"path":483,"stem":484},"Separate schema components from UI components","/apps/app-development/guides/schema-components-vs-ui-components","2.Apps/app-development/99.guides/schema-components-vs-ui-components",{"title":486,"path":487,"stem":488},"Section config standard","/apps/app-development/guides/section-config-standard","2.Apps/app-development/99.guides/section-config-standard",{"title":490,"path":491,"stem":492},"Shared field factories","/apps/app-development/guides/shared-field-factories","2.Apps/app-development/99.guides/shared-field-factories",{"title":494,"path":495,"stem":496},"How to write CSS","/apps/app-development/guides/writing-css","2.Apps/app-development/99.guides/writing-css",{"title":498,"path":499,"stem":500},"App Configuration","/apps/app-development/app-configuration","2.Apps/app-development/app-configuration",{"title":502,"path":503,"stem":504},"App Starter","/apps/app-development/app-starter","2.Apps/app-development/app-starter",{"title":506,"path":507,"stem":508},"Best Practice","/apps/app-development/best-practice","2.Apps/app-development/best-practice",{"title":510,"path":511,"stem":512},"Block Definitions","/apps/app-development/block-definitions","2.Apps/app-development/block-definitions",{"title":514,"path":515,"stem":516},"Coding Standards","/apps/app-development/coding-standards","2.Apps/app-development/coding-standards",{"title":518,"path":519,"stem":520},"Consent Adapters","/apps/app-development/consent-adapters","2.Apps/app-development/consent-adapters",{"title":522,"path":523,"stem":524},"Consuming Query Fields","/apps/app-development/consuming-query-fields","2.Apps/app-development/consuming-query-fields",{"title":526,"path":527,"stem":528},"Implementation Overview","/apps/app-development/implementation-overview","2.Apps/app-development/implementation-overview",{"title":530,"path":531,"stem":532},"Platform Dependencies","/apps/app-development/platform-dependencies","2.Apps/app-development/platform-dependencies",{"title":534,"path":535,"stem":536},"Schema Fields","/apps/app-development/schema-fields","2.Apps/app-development/schema-fields",{"title":538,"path":539,"stem":540},"Section Definitions","/apps/app-development/section-definitions","2.Apps/app-development/section-definitions",{"title":542,"path":543,"stem":544},"Studio Icons","/apps/app-development/studio-icons","2.Apps/app-development/studio-icons",{"title":546,"path":547,"stem":548,"children":549},"App Docs","/apps/app-docs","2.Apps/app-docs/0.index",[550,551,555,559,563,567,571,575,579,583,587,591,595,599,603,607,611,615,619,623,627],{"title":546,"path":547,"stem":548},{"title":552,"path":553,"stem":554},"Actindo","/apps/app-docs/actindo","2.Apps/app-docs/actindo",{"title":556,"path":557,"stem":558},"Adobe Commerce","/apps/app-docs/adobe-commerce","2.Apps/app-docs/adobe-commerce",{"title":560,"path":561,"stem":562},"B2Bsellers","/apps/app-docs/b2bsellers","2.Apps/app-docs/b2bsellers",{"title":564,"path":565,"stem":566},"Battery Included","/apps/app-docs/battery-included","2.Apps/app-docs/battery-included",{"title":568,"path":569,"stem":570},"CCM19","/apps/app-docs/ccm19","2.Apps/app-docs/ccm19",{"title":572,"path":573,"stem":574},"Cookiebot","/apps/app-docs/cookiebot","2.Apps/app-docs/cookiebot",{"title":576,"path":577,"stem":578},"Google Tag Manager (GTM)","/apps/app-docs/gtm","2.Apps/app-docs/gtm",{"title":580,"path":581,"stem":582},"Hygraph","/apps/app-docs/hygraph","2.Apps/app-docs/hygraph",{"title":584,"path":585,"stem":586},"JTL Platform","/apps/app-docs/jtl-platform","2.Apps/app-docs/jtl-platform",{"title":588,"path":589,"stem":590},"Nimstrata Google Retail API","/apps/app-docs/nimstrata","2.Apps/app-docs/nimstrata",{"title":592,"path":593,"stem":594},"Pimcore","/apps/app-docs/pimcore","2.Apps/app-docs/pimcore",{"title":596,"path":597,"stem":598},"Sylius","/apps/app-docs/sylius","2.Apps/app-docs/sylius",{"title":600,"path":601,"stem":602},"Commercetools","/apps/app-docs/commercetools","2.apps/app-docs/commercetools",{"title":604,"path":605,"stem":606},"Emporix","/apps/app-docs/emporix","2.apps/app-docs/emporix",{"title":608,"path":609,"stem":610},"Klaviyo","/apps/app-docs/klaviyo","2.apps/app-docs/klaviyo",{"title":612,"path":613,"stem":614},"OXID eShop","/apps/app-docs/oxid","2.apps/app-docs/oxid",{"title":616,"path":617,"stem":618},"Shopify","/apps/app-docs/shopify","2.apps/app-docs/shopify",{"title":620,"path":621,"stem":622},"Shopware","/apps/app-docs/shopware","2.apps/app-docs/shopware",{"title":624,"path":625,"stem":626},"Vercel Analytics","/apps/app-docs/vercel-analytics","2.apps/app-docs/vercel-analytics",{"title":628,"path":629,"stem":630},"Vercel Speed Insights","/apps/app-docs/vercel-speed-insights","2.apps/app-docs/vercel-speed-insights",{"title":632,"path":633,"stem":634,"children":635,"page":55},"Essentials","/apps/essentials","2.Apps/essentials",[636,640,644],{"title":637,"path":638,"stem":639},"Legal","/apps/essentials/legal","2.Apps/essentials/legal",{"title":641,"path":642,"stem":643},"Mailer","/apps/essentials/mailer","2.Apps/essentials/mailer",{"title":216,"path":645,"stem":646},"/apps/essentials/seo","2.Apps/essentials/seo",{"title":648,"path":649,"stem":650,"children":651},"Laioutr UI","/laioutr-ui","3.laioutr-ui/0.index",[652,653,685,691,697,885,902,908,914,968,986,1116],{"title":648,"path":649,"stem":650},{"title":5,"path":654,"stem":655,"children":656},"/laioutr-ui/getting-started","3.laioutr-ui/01.getting-started/0.index",[657,658,662,666,670,674,678,682],{"title":5,"path":654,"stem":655},{"title":659,"path":660,"stem":661},"Browser support","/laioutr-ui/getting-started/browser-support","3.laioutr-ui/01.getting-started/1.browser-support",{"title":663,"path":664,"stem":665},"Common Data","/laioutr-ui/getting-started/common-data","3.laioutr-ui/01.getting-started/99.common-data",{"title":667,"path":668,"stem":669},"CSS Layers","/laioutr-ui/getting-started/css-layers","3.laioutr-ui/01.getting-started/css-layers",{"title":671,"path":672,"stem":673},"Figma Kit","/laioutr-ui/getting-started/figma-kit","3.laioutr-ui/01.getting-started/figma-kit",{"title":675,"path":676,"stem":677},"Surface Tone","/laioutr-ui/getting-started/surface-tone","3.laioutr-ui/01.getting-started/surface-tone",{"title":679,"path":680,"stem":681},"Theming","/laioutr-ui/getting-started/theming","3.laioutr-ui/01.getting-started/theming",{"title":212,"path":683,"stem":684},"/laioutr-ui/getting-started/z-ordering","3.laioutr-ui/01.getting-started/z-ordering",{"title":686,"path":687,"stem":688,"children":689},"B2B","/laioutr-ui/b2b","3.laioutr-ui/b2b/0.index",[690],{"title":686,"path":687,"stem":688},{"title":692,"path":693,"stem":694,"children":695},"Booking","/laioutr-ui/booking","3.laioutr-ui/booking/0.index",[696],{"title":692,"path":693,"stem":694},{"title":698,"path":699,"stem":700,"children":701},"CMS","/laioutr-ui/cms","3.laioutr-ui/cms/0.index",[702,703,709,734,746,750,754,758,762,766,778,799,820,836],{"title":698,"path":699,"stem":700},{"title":704,"path":705,"stem":706,"children":707},"Alphabetical Index","/laioutr-ui/cms/alphabetical-index","3.laioutr-ui/cms/alphabetical-index",[708],{"title":704,"path":705,"stem":706},{"title":710,"path":711,"stem":712,"children":713,"page":55},"Banner","/laioutr-ui/cms/banner","3.laioutr-ui/cms/banner",[714,718,722,726,730],{"title":715,"path":716,"stem":717},"Banner Basic","/laioutr-ui/cms/banner/banner-basic","3.laioutr-ui/cms/banner/banner-basic",{"title":719,"path":720,"stem":721},"Banner Integrated","/laioutr-ui/cms/banner/banner-integrated","3.laioutr-ui/cms/banner/banner-integrated",{"title":723,"path":724,"stem":725},"Banner Showcase","/laioutr-ui/cms/banner/banner-showcase","3.laioutr-ui/cms/banner/banner-showcase",{"title":727,"path":728,"stem":729},"Media + Text","/laioutr-ui/cms/banner/media-text","3.laioutr-ui/cms/banner/media-text",{"title":731,"path":732,"stem":733},"USP Banner","/laioutr-ui/cms/banner/usp-banner","3.laioutr-ui/cms/banner/usp-banner",{"title":431,"path":735,"stem":736,"children":737,"page":55},"/laioutr-ui/cms/blog","3.laioutr-ui/cms/blog",[738,742],{"title":739,"path":740,"stem":741},"Blog Post Detail","/laioutr-ui/cms/blog/blog-post-detail","3.laioutr-ui/cms/blog/blog-post-detail",{"title":743,"path":744,"stem":745},"Blog Post Listing","/laioutr-ui/cms/blog/blog-post-listing","3.laioutr-ui/cms/blog/blog-post-listing",{"title":747,"path":748,"stem":749},"Brand Hero","/laioutr-ui/cms/brand-hero","3.laioutr-ui/cms/brand-hero",{"title":751,"path":752,"stem":753},"Container","/laioutr-ui/cms/container","3.laioutr-ui/cms/container",{"title":755,"path":756,"stem":757},"Content Grid","/laioutr-ui/cms/content-grid","3.laioutr-ui/cms/content-grid",{"title":759,"path":760,"stem":761},"Editorial Grid","/laioutr-ui/cms/editorial-grid","3.laioutr-ui/cms/editorial-grid",{"title":763,"path":764,"stem":765},"Media Gallery","/laioutr-ui/cms/media-gallery","3.laioutr-ui/cms/media-gallery",{"title":423,"path":767,"stem":768,"children":769,"page":55},"/laioutr-ui/cms/newsletter","3.laioutr-ui/cms/newsletter",[770,774],{"title":771,"path":772,"stem":773},"Email Input Form","/laioutr-ui/cms/newsletter/email-input-form","3.laioutr-ui/cms/newsletter/email-input-form",{"title":775,"path":776,"stem":777},"Newsletter Registration","/laioutr-ui/cms/newsletter/newsletter-registration","3.laioutr-ui/cms/newsletter/newsletter-registration",{"title":779,"path":780,"stem":781,"children":782,"page":55},"Popups","/laioutr-ui/cms/popups","3.laioutr-ui/cms/popups",[783,787,791,795],{"title":784,"path":785,"stem":786},"PopUp","/laioutr-ui/cms/popups/pop-up","3.laioutr-ui/cms/popups/pop-up",{"title":788,"path":789,"stem":790},"PopUp Info","/laioutr-ui/cms/popups/pop-up-info","3.laioutr-ui/cms/popups/pop-up-info",{"title":792,"path":793,"stem":794},"PopUp Newsletter","/laioutr-ui/cms/popups/pop-up-newsletter","3.laioutr-ui/cms/popups/pop-up-newsletter",{"title":796,"path":797,"stem":798},"PopUp Promotion","/laioutr-ui/cms/popups/pop-up-promotion","3.laioutr-ui/cms/popups/pop-up-promotion",{"title":800,"path":801,"stem":802,"children":803,"page":55},"Quotes","/laioutr-ui/cms/quotes","3.laioutr-ui/cms/quotes",[804,808,812,816],{"title":805,"path":806,"stem":807},"Persona Quote","/laioutr-ui/cms/quotes/persona-quote","3.laioutr-ui/cms/quotes/persona-quote",{"title":809,"path":810,"stem":811},"Persona Quote Slider","/laioutr-ui/cms/quotes/persona-quote-slider","3.laioutr-ui/cms/quotes/persona-quote-slider",{"title":813,"path":814,"stem":815},"Quote Card","/laioutr-ui/cms/quotes/quote-card","3.laioutr-ui/cms/quotes/quote-card",{"title":817,"path":818,"stem":819},"Quote Card Slider","/laioutr-ui/cms/quotes/quote-card-slider","3.laioutr-ui/cms/quotes/quote-card-slider",{"title":821,"path":822,"stem":823,"children":824,"page":55},"Reviews","/laioutr-ui/cms/reviews","3.laioutr-ui/cms/reviews",[825,828,832],{"title":358,"path":826,"stem":827},"/laioutr-ui/cms/reviews/review","3.laioutr-ui/cms/reviews/review",{"title":829,"path":830,"stem":831},"Review Form","/laioutr-ui/cms/reviews/review-form","3.laioutr-ui/cms/reviews/review-form",{"title":833,"path":834,"stem":835},"Social Share","/laioutr-ui/cms/reviews/social-share","3.laioutr-ui/cms/reviews/social-share",{"title":837,"path":838,"stem":839,"children":840,"page":55},"Slider","/laioutr-ui/cms/slider","3.laioutr-ui/cms/slider",[841,845,849,853,857,861,865,869,873,877,881],{"title":842,"path":843,"stem":844},"Content Slider","/laioutr-ui/cms/slider/content-slider","3.laioutr-ui/cms/slider/content-slider",{"title":846,"path":847,"stem":848},"Hero Slider","/laioutr-ui/cms/slider/hero-slider","3.laioutr-ui/cms/slider/hero-slider",{"title":850,"path":851,"stem":852},"Logo Grid","/laioutr-ui/cms/slider/logo-grid","3.laioutr-ui/cms/slider/logo-grid",{"title":854,"path":855,"stem":856},"Logo Slider","/laioutr-ui/cms/slider/logo-slider","3.laioutr-ui/cms/slider/logo-slider",{"title":858,"path":859,"stem":860},"Swiper Arrows","/laioutr-ui/cms/slider/swiper-arrows","3.laioutr-ui/cms/slider/swiper-arrows",{"title":862,"path":863,"stem":864},"Swiper Bullets","/laioutr-ui/cms/slider/swiper-bullets","3.laioutr-ui/cms/slider/swiper-bullets",{"title":866,"path":867,"stem":868},"Swiper Chrome","/laioutr-ui/cms/slider/swiper-chrome","3.laioutr-ui/cms/slider/swiper-chrome",{"title":870,"path":871,"stem":872},"Swiper Nav Bar","/laioutr-ui/cms/slider/swiper-nav-bar","3.laioutr-ui/cms/slider/swiper-nav-bar",{"title":874,"path":875,"stem":876},"Swiper Numbers","/laioutr-ui/cms/slider/swiper-numbers","3.laioutr-ui/cms/slider/swiper-numbers",{"title":878,"path":879,"stem":880},"Swiper Scrollbar","/laioutr-ui/cms/slider/swiper-scrollbar","3.laioutr-ui/cms/slider/swiper-scrollbar",{"title":882,"path":883,"stem":884},"Thumbnails Slider","/laioutr-ui/cms/slider/thumbnails-slider","3.laioutr-ui/cms/slider/thumbnails-slider",{"title":338,"path":886,"stem":887,"children":888},"/laioutr-ui/location","3.laioutr-ui/location/0.index",[889,890,894,898],{"title":338,"path":886,"stem":887},{"title":891,"path":892,"stem":893},"Location Card","/laioutr-ui/location/location-card","3.laioutr-ui/location/location-card",{"title":895,"path":896,"stem":897},"Location Detail","/laioutr-ui/location/location-detail","3.laioutr-ui/location/location-detail",{"title":899,"path":900,"stem":901},"Location Finder","/laioutr-ui/location/location-finder","3.laioutr-ui/location/location-finder",{"title":903,"path":904,"stem":905,"children":906},"Marketplace","/laioutr-ui/marketplace","3.laioutr-ui/marketplace/0.index",[907],{"title":903,"path":904,"stem":905},{"title":909,"path":910,"stem":911,"children":912},"Multichannel","/laioutr-ui/multichannel","3.laioutr-ui/multichannel/0.index",[913],{"title":909,"path":910,"stem":911},{"title":915,"path":916,"stem":917,"children":918},"Navigation & Headers","/laioutr-ui/navigation","3.laioutr-ui/navigation/0.index",[919,920,924,928,932,936,940,944,948,952,956,960,964],{"title":915,"path":916,"stem":917},{"title":921,"path":922,"stem":923},"Breadcrumbs","/laioutr-ui/navigation/breadcrumbs","3.laioutr-ui/navigation/breadcrumbs",{"title":925,"path":926,"stem":927},"Footer","/laioutr-ui/navigation/footer","3.laioutr-ui/navigation/footer",{"title":929,"path":930,"stem":931},"Footer Menu","/laioutr-ui/navigation/footer-menu","3.laioutr-ui/navigation/footer-menu",{"title":933,"path":934,"stem":935},"Header Basic","/laioutr-ui/navigation/header-basic","3.laioutr-ui/navigation/header-basic",{"title":937,"path":938,"stem":939},"Header Shop","/laioutr-ui/navigation/header-shop","3.laioutr-ui/navigation/header-shop",{"title":941,"path":942,"stem":943},"Mega Menu","/laioutr-ui/navigation/mega-menu","3.laioutr-ui/navigation/mega-menu",{"title":945,"path":946,"stem":947},"Menu Side by Side","/laioutr-ui/navigation/menu-side-by-side","3.laioutr-ui/navigation/menu-side-by-side",{"title":949,"path":950,"stem":951},"Mobile Menu (Basic)","/laioutr-ui/navigation/mobile-menu-basic","3.laioutr-ui/navigation/mobile-menu-basic",{"title":953,"path":954,"stem":955},"Mobile Menu (Shop)","/laioutr-ui/navigation/mobile-menu-shop","3.laioutr-ui/navigation/mobile-menu-shop",{"title":957,"path":958,"stem":959},"Page Not Found","/laioutr-ui/navigation/page-not-found","3.laioutr-ui/navigation/page-not-found",{"title":961,"path":962,"stem":963},"Search Auto-Suggest","/laioutr-ui/navigation/search-auto-suggest","3.laioutr-ui/navigation/search-auto-suggest",{"title":965,"path":966,"stem":967},"Top Bar","/laioutr-ui/navigation/top-bar","3.laioutr-ui/navigation/top-bar",{"title":969,"path":970,"stem":971,"children":972},"SaaS","/laioutr-ui/saas","3.laioutr-ui/saas/0.index",[973,974,978,982],{"title":969,"path":970,"stem":971},{"title":975,"path":976,"stem":977},"Plan Card","/laioutr-ui/saas/plan-card","3.laioutr-ui/saas/plan-card",{"title":979,"path":980,"stem":981},"Plan Card Slider","/laioutr-ui/saas/plan-card-slider","3.laioutr-ui/saas/plan-card-slider",{"title":983,"path":984,"stem":985},"Plan Comparison Table","/laioutr-ui/saas/plan-comparison-table","3.laioutr-ui/saas/plan-comparison-table",{"title":987,"path":988,"stem":989,"children":990},"Shop","/laioutr-ui/shop","3.laioutr-ui/shop/0.index",[991,992,1020,1024,1028,1032,1036,1092,1096,1100,1104,1108,1112],{"title":987,"path":988,"stem":989},{"title":350,"path":993,"stem":994,"children":995,"page":55},"/laioutr-ui/shop/cart","3.laioutr-ui/shop/cart",[996,1000,1004,1008,1012,1016],{"title":997,"path":998,"stem":999},"Cart Coupon Code Accordion","/laioutr-ui/shop/cart/cart-coupon-code-accordion","3.laioutr-ui/shop/cart/cart-coupon-code-accordion",{"title":1001,"path":1002,"stem":1003},"Cart List Item","/laioutr-ui/shop/cart/cart-list-item","3.laioutr-ui/shop/cart/cart-list-item",{"title":1005,"path":1006,"stem":1007},"Cart Sheet","/laioutr-ui/shop/cart/cart-sheet","3.laioutr-ui/shop/cart/cart-sheet",{"title":1009,"path":1010,"stem":1011},"Cart Summary Box","/laioutr-ui/shop/cart/cart-summary-box","3.laioutr-ui/shop/cart/cart-summary-box",{"title":1013,"path":1014,"stem":1015},"Empty State Cart","/laioutr-ui/shop/cart/empty-state-cart","3.laioutr-ui/shop/cart/empty-state-cart",{"title":1017,"path":1018,"stem":1019},"Free Delivery Progress","/laioutr-ui/shop/cart/free-delivery-progress","3.laioutr-ui/shop/cart/free-delivery-progress",{"title":1021,"path":1022,"stem":1023},"Category Card Grid","/laioutr-ui/shop/category-card-grid","3.laioutr-ui/shop/category-card-grid",{"title":1025,"path":1026,"stem":1027},"Category Card Slider","/laioutr-ui/shop/category-card-slider","3.laioutr-ui/shop/category-card-slider",{"title":1029,"path":1030,"stem":1031},"Filter Bar","/laioutr-ui/shop/filter-bar","3.laioutr-ui/shop/filter-bar",{"title":1033,"path":1034,"stem":1035},"Filter Off Canvas","/laioutr-ui/shop/filter-off-canvas","3.laioutr-ui/shop/filter-off-canvas",{"title":1037,"path":1038,"stem":1039,"children":1040,"page":55},"Product Detail","/laioutr-ui/shop/product-detail","3.laioutr-ui/shop/product-detail",[1041,1045,1049,1053,1057,1061,1064,1068,1072,1076,1080,1084,1088],{"title":1042,"path":1043,"stem":1044},"Add to Cart","/laioutr-ui/shop/product-detail/add-to-cart","3.laioutr-ui/shop/product-detail/add-to-cart",{"title":1046,"path":1047,"stem":1048},"Benefits Box","/laioutr-ui/shop/product-detail/benefits-box","3.laioutr-ui/shop/product-detail/benefits-box",{"title":1050,"path":1051,"stem":1052},"Coupon Box","/laioutr-ui/shop/product-detail/coupon-box","3.laioutr-ui/shop/product-detail/coupon-box",{"title":1054,"path":1055,"stem":1056},"Energy Label","/laioutr-ui/shop/product-detail/energy-label","3.laioutr-ui/shop/product-detail/energy-label",{"title":1058,"path":1059,"stem":1060},"Price Info","/laioutr-ui/shop/product-detail/price-info","3.laioutr-ui/shop/product-detail/price-info",{"title":1037,"path":1062,"stem":1063},"/laioutr-ui/shop/product-detail/product-detail","3.laioutr-ui/shop/product-detail/product-detail",{"title":1065,"path":1066,"stem":1067},"Product Image Gallery","/laioutr-ui/shop/product-detail/product-image-gallery","3.laioutr-ui/shop/product-detail/product-image-gallery",{"title":1069,"path":1070,"stem":1071},"Product Title","/laioutr-ui/shop/product-detail/product-title","3.laioutr-ui/shop/product-detail/product-title",{"title":1073,"path":1074,"stem":1075},"Quantity Discount","/laioutr-ui/shop/product-detail/quantity-discount","3.laioutr-ui/shop/product-detail/quantity-discount",{"title":1077,"path":1078,"stem":1079},"Variant Off Canvas","/laioutr-ui/shop/product-detail/variant-off-canvas","3.laioutr-ui/shop/product-detail/variant-off-canvas",{"title":1081,"path":1082,"stem":1083},"Variant Selector Configurator","/laioutr-ui/shop/product-detail/variant-selector-configurator","3.laioutr-ui/shop/product-detail/variant-selector-configurator",{"title":1085,"path":1086,"stem":1087},"Variant Selector (Multiple)","/laioutr-ui/shop/product-detail/variant-selector-multiple","3.laioutr-ui/shop/product-detail/variant-selector-multiple",{"title":1089,"path":1090,"stem":1091},"Variant Selector Options","/laioutr-ui/shop/product-detail/variant-selector-options","3.laioutr-ui/shop/product-detail/variant-selector-options",{"title":1093,"path":1094,"stem":1095},"Product Listing Grid","/laioutr-ui/shop/product-listing-grid","3.laioutr-ui/shop/product-listing-grid",{"title":1097,"path":1098,"stem":1099},"Product Slider","/laioutr-ui/shop/product-slider","3.laioutr-ui/shop/product-slider",{"title":1101,"path":1102,"stem":1103},"Product Slider Showcase","/laioutr-ui/shop/product-slider-showcase","3.laioutr-ui/shop/product-slider-showcase",{"title":1105,"path":1106,"stem":1107},"Product Tile (Basic)","/laioutr-ui/shop/product-tile-basic","3.laioutr-ui/shop/product-tile-basic",{"title":1109,"path":1110,"stem":1111},"Search Result Hero","/laioutr-ui/shop/search-result-hero","3.laioutr-ui/shop/search-result-hero",{"title":1113,"path":1114,"stem":1115},"Sort Modes","/laioutr-ui/shop/sort-modes","3.laioutr-ui/shop/sort-modes",{"title":1117,"path":1118,"stem":1119,"children":1120},"UI Kit","/laioutr-ui/ui-kit","3.laioutr-ui/ui-kit/0.index",[1121,1122,1282,1306,1327,1344,1381,1490,1519],{"title":1117,"path":1118,"stem":1119},{"title":1123,"path":1124,"stem":1125,"children":1126,"page":55},"General","/laioutr-ui/ui-kit/general","3.laioutr-ui/ui-kit/01.general",[1127,1131,1135,1139,1143,1147,1151,1155,1159,1163,1167,1170,1174,1178,1182,1186,1190,1194,1198,1202,1206,1210,1214,1218,1222,1226,1230,1234,1238,1242,1246,1250,1254,1258,1262,1266,1270,1274,1278],{"title":1128,"path":1129,"stem":1130},"Accordion","/laioutr-ui/ui-kit/general/accordion","3.laioutr-ui/ui-kit/01.general/Accordion",{"title":1132,"path":1133,"stem":1134},"Avatar","/laioutr-ui/ui-kit/general/avatar","3.laioutr-ui/ui-kit/01.general/Avatar",{"title":1136,"path":1137,"stem":1138},"Backdrop","/laioutr-ui/ui-kit/general/backdrop","3.laioutr-ui/ui-kit/01.general/Backdrop",{"title":1140,"path":1141,"stem":1142},"Dropdown Menu","/laioutr-ui/ui-kit/general/dropdownmenu","3.laioutr-ui/ui-kit/01.general/DropdownMenu",{"title":1144,"path":1145,"stem":1146},"Edge Glow","/laioutr-ui/ui-kit/general/edgeglow","3.laioutr-ui/ui-kit/01.general/EdgeGlow",{"title":1148,"path":1149,"stem":1150},"Empty State","/laioutr-ui/ui-kit/general/emptystate","3.laioutr-ui/ui-kit/01.general/EmptyState",{"title":1152,"path":1153,"stem":1154},"Icon","/laioutr-ui/ui-kit/general/icon","3.laioutr-ui/ui-kit/01.general/Icon",{"title":1156,"path":1157,"stem":1158},"Image Contrast Overlay","/laioutr-ui/ui-kit/general/imagecontrastoverlay","3.laioutr-ui/ui-kit/01.general/ImageContrastOverlay",{"title":1160,"path":1161,"stem":1162},"Lightbox","/laioutr-ui/ui-kit/general/lightbox","3.laioutr-ui/ui-kit/01.general/Lightbox",{"title":1164,"path":1165,"stem":1166},"Loading Spinner","/laioutr-ui/ui-kit/general/loadingspinner","3.laioutr-ui/ui-kit/01.general/LoadingSpinner",{"title":387,"path":1168,"stem":1169},"/laioutr-ui/ui-kit/general/media","3.laioutr-ui/ui-kit/01.general/Media",{"title":1171,"path":1172,"stem":1173},"Navigation Bullets","/laioutr-ui/ui-kit/general/navigationbullets","3.laioutr-ui/ui-kit/01.general/NavigationBullets",{"title":1175,"path":1176,"stem":1177},"Placeholder","/laioutr-ui/ui-kit/general/placeholder","3.laioutr-ui/ui-kit/01.general/Placeholder",{"title":1179,"path":1180,"stem":1181},"Progress Bar","/laioutr-ui/ui-kit/general/progressbar","3.laioutr-ui/ui-kit/01.general/ProgressBar",{"title":1183,"path":1184,"stem":1185},"Scrollbar","/laioutr-ui/ui-kit/general/scrollbar","3.laioutr-ui/ui-kit/01.general/Scrollbar",{"title":1187,"path":1188,"stem":1189},"Swatch","/laioutr-ui/ui-kit/general/swatch","3.laioutr-ui/ui-kit/01.general/Swatch",{"title":1191,"path":1192,"stem":1193},"SwiperScrollbar","/laioutr-ui/ui-kit/general/swiperscrollbar","3.laioutr-ui/ui-kit/01.general/SwiperScrollbar",{"title":1195,"path":1196,"stem":1197},"Thumbnail","/laioutr-ui/ui-kit/general/thumbnail","3.laioutr-ui/ui-kit/01.general/Thumbnail",{"title":1199,"path":1200,"stem":1201},"Tooltip","/laioutr-ui/ui-kit/general/tooltip","3.laioutr-ui/ui-kit/01.general/Tooltip",{"title":1203,"path":1204,"stem":1205},"Amount Pill","/laioutr-ui/ui-kit/general/amount-pill","3.laioutr-ui/ui-kit/01.general/amount-pill",{"title":1207,"path":1208,"stem":1209},"Dark Mode Switch","/laioutr-ui/ui-kit/general/dark-mode-switch","3.laioutr-ui/ui-kit/01.general/dark-mode-switch",{"title":1211,"path":1212,"stem":1213},"Language Switcher","/laioutr-ui/ui-kit/general/language-switcher","3.laioutr-ui/ui-kit/01.general/language-switcher",{"title":1215,"path":1216,"stem":1217},"Media Preview","/laioutr-ui/ui-kit/general/media-preview","3.laioutr-ui/ui-kit/01.general/media-preview",{"title":1219,"path":1220,"stem":1221},"Media Stage","/laioutr-ui/ui-kit/general/media-stage","3.laioutr-ui/ui-kit/01.general/media-stage",{"title":1223,"path":1224,"stem":1225},"Nav Link Item","/laioutr-ui/ui-kit/general/nav-link-item","3.laioutr-ui/ui-kit/01.general/nav-link-item",{"title":1227,"path":1228,"stem":1229},"Nav Section Heading","/laioutr-ui/ui-kit/general/nav-section-heading","3.laioutr-ui/ui-kit/01.general/nav-section-heading",{"title":1231,"path":1232,"stem":1233},"OnSurface","/laioutr-ui/ui-kit/general/on-surface","3.laioutr-ui/ui-kit/01.general/on-surface",{"title":1235,"path":1236,"stem":1237},"Opening Hours Weekly Table","/laioutr-ui/ui-kit/general/opening-hours-weekly-table","3.laioutr-ui/ui-kit/01.general/opening-hours-weekly-table",{"title":1239,"path":1240,"stem":1241},"Opening Status","/laioutr-ui/ui-kit/general/opening-status","3.laioutr-ui/ui-kit/01.general/opening-status",{"title":1243,"path":1244,"stem":1245},"Opening Status Detail","/laioutr-ui/ui-kit/general/opening-status-detail","3.laioutr-ui/ui-kit/01.general/opening-status-detail",{"title":1247,"path":1248,"stem":1249},"Opening Status Indicator","/laioutr-ui/ui-kit/general/opening-status-indicator","3.laioutr-ui/ui-kit/01.general/opening-status-indicator",{"title":1251,"path":1252,"stem":1253},"Rating Progress Bar Filter","/laioutr-ui/ui-kit/general/rating-progress-bar-filter","3.laioutr-ui/ui-kit/01.general/rating-progress-bar-filter",{"title":1255,"path":1256,"stem":1257},"Status Message","/laioutr-ui/ui-kit/general/status-message","3.laioutr-ui/ui-kit/01.general/status-message",{"title":1259,"path":1260,"stem":1261},"Stock Info Summary","/laioutr-ui/ui-kit/general/stock-info-summary","3.laioutr-ui/ui-kit/01.general/stock-info-summary",{"title":1263,"path":1264,"stem":1265},"Swatch Chip","/laioutr-ui/ui-kit/general/swatch-chip","3.laioutr-ui/ui-kit/01.general/swatch-chip",{"title":1267,"path":1268,"stem":1269},"Swatch Option","/laioutr-ui/ui-kit/general/swatch-option","3.laioutr-ui/ui-kit/01.general/swatch-option",{"title":1271,"path":1272,"stem":1273},"Swatch Summary","/laioutr-ui/ui-kit/general/swatch-summary","3.laioutr-ui/ui-kit/01.general/swatch-summary",{"title":1275,"path":1276,"stem":1277},"Zoom Level (Segmented)","/laioutr-ui/ui-kit/general/zoom-level-segmented","3.laioutr-ui/ui-kit/01.general/zoom-level-segmented",{"title":1279,"path":1280,"stem":1281},"Zoom Level (Stepper)","/laioutr-ui/ui-kit/general/zoom-level-stepper","3.laioutr-ui/ui-kit/01.general/zoom-level-stepper",{"title":1283,"path":1284,"stem":1285,"children":1286,"page":55},"Typography","/laioutr-ui/ui-kit/typography","3.laioutr-ui/ui-kit/02.typography",[1287,1291,1294,1298,1302],{"title":1288,"path":1289,"stem":1290},"Icon List","/laioutr-ui/ui-kit/typography/iconlist","3.laioutr-ui/ui-kit/02.typography/IconList",{"title":383,"path":1292,"stem":1293},"/laioutr-ui/ui-kit/typography/link","3.laioutr-ui/ui-kit/02.typography/Link",{"title":1295,"path":1296,"stem":1297},"Rich Content","/laioutr-ui/ui-kit/typography/richcontent","3.laioutr-ui/ui-kit/02.typography/RichContent",{"title":1299,"path":1300,"stem":1301},"Text","/laioutr-ui/ui-kit/typography/text","3.laioutr-ui/ui-kit/02.typography/Text",{"title":1303,"path":1304,"stem":1305},"Text Group","/laioutr-ui/ui-kit/typography/text-group","3.laioutr-ui/ui-kit/02.typography/text-group",{"title":1307,"path":1308,"stem":1309,"children":1310,"page":55},"Layout","/laioutr-ui/ui-kit/layout","3.laioutr-ui/ui-kit/03.layout",[1311,1315,1319,1323],{"title":1312,"path":1313,"stem":1314},"Grid Fill","/laioutr-ui/ui-kit/layout/gridfill","3.laioutr-ui/ui-kit/03.layout/GridFill",{"title":1316,"path":1317,"stem":1318},"Grid Masonry","/laioutr-ui/ui-kit/layout/gridmasonry","3.laioutr-ui/ui-kit/03.layout/GridMasonry",{"title":1320,"path":1321,"stem":1322},"Scroll Area","/laioutr-ui/ui-kit/layout/scrollarea","3.laioutr-ui/ui-kit/03.layout/ScrollArea",{"title":1324,"path":1325,"stem":1326},"Separator","/laioutr-ui/ui-kit/layout/separator","3.laioutr-ui/ui-kit/03.layout/Separator",{"title":1328,"path":1329,"stem":1330,"children":1331,"page":55},"Content","/laioutr-ui/ui-kit/content","3.laioutr-ui/ui-kit/04.content",[1332,1336,1340],{"title":1333,"path":1334,"stem":1335},"Card","/laioutr-ui/ui-kit/content/card","3.laioutr-ui/ui-kit/04.content/Card",{"title":1337,"path":1338,"stem":1339},"Description List","/laioutr-ui/ui-kit/content/description-list","3.laioutr-ui/ui-kit/04.content/description-list",{"title":1341,"path":1342,"stem":1343},"Link Tile","/laioutr-ui/ui-kit/content/link-tile","3.laioutr-ui/ui-kit/04.content/link-tile",{"title":1345,"path":1346,"stem":1347,"children":1348,"page":55},"Surfaces","/laioutr-ui/ui-kit/surfaces","3.laioutr-ui/ui-kit/05.surfaces",[1349,1353,1357,1361,1365,1369,1373,1377],{"title":1350,"path":1351,"stem":1352},"Alert Dialog","/laioutr-ui/ui-kit/surfaces/alertdialog","3.laioutr-ui/ui-kit/05.surfaces/AlertDialog",{"title":1354,"path":1355,"stem":1356},"Popover","/laioutr-ui/ui-kit/surfaces/popover","3.laioutr-ui/ui-kit/05.surfaces/Popover",{"title":1358,"path":1359,"stem":1360},"Sheet","/laioutr-ui/ui-kit/surfaces/sheet","3.laioutr-ui/ui-kit/05.surfaces/Sheet",{"title":1362,"path":1363,"stem":1364},"Tabs","/laioutr-ui/ui-kit/surfaces/tabs","3.laioutr-ui/ui-kit/05.surfaces/Tabs",{"title":1366,"path":1367,"stem":1368},"Toast","/laioutr-ui/ui-kit/surfaces/toast","3.laioutr-ui/ui-kit/05.surfaces/Toast",{"title":1370,"path":1371,"stem":1372},"Toaster","/laioutr-ui/ui-kit/surfaces/toaster","3.laioutr-ui/ui-kit/05.surfaces/Toaster",{"title":1374,"path":1375,"stem":1376},"Context Menu","/laioutr-ui/ui-kit/surfaces/context-menu","3.laioutr-ui/ui-kit/05.surfaces/context-menu",{"title":1378,"path":1379,"stem":1380},"Navigation Menu","/laioutr-ui/ui-kit/surfaces/navigation-menu","3.laioutr-ui/ui-kit/05.surfaces/navigation-menu",{"title":1382,"path":1383,"stem":1384,"children":1385,"page":55},"Form","/laioutr-ui/ui-kit/form","3.laioutr-ui/ui-kit/06.form",[1386,1390,1394,1398,1402,1406,1410,1414,1418,1422,1426,1430,1434,1438,1442,1446,1450,1454,1458,1462,1466,1470,1474,1478,1482,1486],{"title":1387,"path":1388,"stem":1389},"Button","/laioutr-ui/ui-kit/form/button","3.laioutr-ui/ui-kit/06.form/Button",{"title":1391,"path":1392,"stem":1393},"Checkbox","/laioutr-ui/ui-kit/form/checkbox","3.laioutr-ui/ui-kit/06.form/Checkbox",{"title":1395,"path":1396,"stem":1397},"Field","/laioutr-ui/ui-kit/form/field","3.laioutr-ui/ui-kit/06.form/Field",{"title":1399,"path":1400,"stem":1401},"Input","/laioutr-ui/ui-kit/form/input","3.laioutr-ui/ui-kit/06.form/Input",{"title":1403,"path":1404,"stem":1405},"Label","/laioutr-ui/ui-kit/form/label","3.laioutr-ui/ui-kit/06.form/Label",{"title":1407,"path":1408,"stem":1409},"Load More","/laioutr-ui/ui-kit/form/loadmore","3.laioutr-ui/ui-kit/06.form/LoadMore",{"title":1411,"path":1412,"stem":1413},"Pagination","/laioutr-ui/ui-kit/form/pagination","3.laioutr-ui/ui-kit/06.form/Pagination",{"title":1415,"path":1416,"stem":1417},"Quantity Picker","/laioutr-ui/ui-kit/form/quantitypicker","3.laioutr-ui/ui-kit/06.form/QuantityPicker",{"title":1419,"path":1420,"stem":1421},"Select","/laioutr-ui/ui-kit/form/select","3.laioutr-ui/ui-kit/06.form/Select",{"title":1423,"path":1424,"stem":1425},"Switch","/laioutr-ui/ui-kit/form/switch","3.laioutr-ui/ui-kit/06.form/Switch",{"title":1427,"path":1428,"stem":1429},"Highlight Toggle","/laioutr-ui/ui-kit/form/highlight-toggle","3.laioutr-ui/ui-kit/06.form/highlight-toggle",{"title":1431,"path":1432,"stem":1433},"Icon Button","/laioutr-ui/ui-kit/form/icon-button","3.laioutr-ui/ui-kit/06.form/icon-button",{"title":1435,"path":1436,"stem":1437},"Input Autocomplete","/laioutr-ui/ui-kit/form/input-autocomplete","3.laioutr-ui/ui-kit/06.form/input-autocomplete",{"title":1439,"path":1440,"stem":1441},"Input Checkbox","/laioutr-ui/ui-kit/form/input-checkbox","3.laioutr-ui/ui-kit/06.form/input-checkbox",{"title":1443,"path":1444,"stem":1445},"Input Combobox","/laioutr-ui/ui-kit/form/input-combobox","3.laioutr-ui/ui-kit/06.form/input-combobox",{"title":1447,"path":1448,"stem":1449},"Input Group","/laioutr-ui/ui-kit/form/input-group","3.laioutr-ui/ui-kit/06.form/input-group",{"title":1451,"path":1452,"stem":1453},"Input Password","/laioutr-ui/ui-kit/form/input-password","3.laioutr-ui/ui-kit/06.form/input-password",{"title":1455,"path":1456,"stem":1457},"Input Pin","/laioutr-ui/ui-kit/form/input-pin","3.laioutr-ui/ui-kit/06.form/input-pin",{"title":1459,"path":1460,"stem":1461},"Input Radio","/laioutr-ui/ui-kit/form/input-radio","3.laioutr-ui/ui-kit/06.form/input-radio",{"title":1463,"path":1464,"stem":1465},"Input Rating","/laioutr-ui/ui-kit/form/input-rating","3.laioutr-ui/ui-kit/06.form/input-rating",{"title":1467,"path":1468,"stem":1469},"Input Search","/laioutr-ui/ui-kit/form/input-search","3.laioutr-ui/ui-kit/06.form/input-search",{"title":1471,"path":1472,"stem":1473},"Input Slider","/laioutr-ui/ui-kit/form/input-slider","3.laioutr-ui/ui-kit/06.form/input-slider",{"title":1475,"path":1476,"stem":1477},"Listbox","/laioutr-ui/ui-kit/form/listbox","3.laioutr-ui/ui-kit/06.form/listbox",{"title":1479,"path":1480,"stem":1481},"Option Tile (Image)","/laioutr-ui/ui-kit/form/option-tile-image","3.laioutr-ui/ui-kit/06.form/option-tile-image",{"title":1483,"path":1484,"stem":1485},"Option Tile (Text)","/laioutr-ui/ui-kit/form/option-tile-text","3.laioutr-ui/ui-kit/06.form/option-tile-text",{"title":1487,"path":1488,"stem":1489},"Variant Selection Card","/laioutr-ui/ui-kit/form/variant-selection-card","3.laioutr-ui/ui-kit/06.form/variant-selection-card",{"title":1491,"path":1492,"stem":1493,"children":1494,"page":55},"Indicators","/laioutr-ui/ui-kit/indicators","3.laioutr-ui/ui-kit/07.indicators",[1495,1499,1503,1507,1511,1515],{"title":1496,"path":1497,"stem":1498},"Badge","/laioutr-ui/ui-kit/indicators/badge","3.laioutr-ui/ui-kit/07.indicators/Badge",{"title":1500,"path":1501,"stem":1502},"Caption Flag","/laioutr-ui/ui-kit/indicators/captionflag","3.laioutr-ui/ui-kit/07.indicators/CaptionFlag",{"title":1504,"path":1505,"stem":1506},"Product Tile Flag","/laioutr-ui/ui-kit/indicators/producttileflag","3.laioutr-ui/ui-kit/07.indicators/ProductTileFlag",{"title":1508,"path":1509,"stem":1510},"Rating Summary","/laioutr-ui/ui-kit/indicators/ratingsummary","3.laioutr-ui/ui-kit/07.indicators/RatingSummary",{"title":1512,"path":1513,"stem":1514},"Stars Rating","/laioutr-ui/ui-kit/indicators/starsrating","3.laioutr-ui/ui-kit/07.indicators/StarsRating",{"title":1516,"path":1517,"stem":1518},"Badge Promotion","/laioutr-ui/ui-kit/indicators/badge-promotion","3.laioutr-ui/ui-kit/07.indicators/badge-promotion",{"title":1520,"path":1521,"stem":1522,"children":1523,"page":55},"Utility Components","/laioutr-ui/ui-kit/utility-components","3.laioutr-ui/ui-kit/08.utility-components",[1524,1528],{"title":1525,"path":1526,"stem":1527},"Highlighted Text","/laioutr-ui/ui-kit/utility-components/highlighted-text","3.laioutr-ui/ui-kit/08.utility-components/highlighted-text",{"title":1529,"path":1530,"stem":1531},"Sizer","/laioutr-ui/ui-kit/utility-components/sizer","3.laioutr-ui/ui-kit/08.utility-components/sizer",{"title":1533,"path":1534,"stem":1535,"children":1536},"Hosting","/hosting","4.hosting/0.index",[1537,1538,1544,1574,1592],{"title":1533,"path":1534,"stem":1535},{"title":1539,"path":1540,"stem":1541,"children":1542},"Laioutr Cloud","/hosting/laioutr-cloud","4.hosting/0.laioutr-cloud/0.index",[1543],{"title":1539,"path":1540,"stem":1541},{"title":1545,"path":1546,"stem":1547,"children":1548},"Hyperscaler","/hosting/hyperscaler","4.hosting/1.hyperscaler/0.index",[1549,1550,1554,1558,1562,1566,1570],{"title":1545,"path":1546,"stem":1547},{"title":1551,"path":1552,"stem":1553},"Akamai Adapter","/hosting/hyperscaler/akamai-adapter","4.hosting/1.hyperscaler/akamai-adapter",{"title":1555,"path":1556,"stem":1557},"AWS Adapter","/hosting/hyperscaler/aws-adapter","4.hosting/1.hyperscaler/aws-adapter",{"title":1559,"path":1560,"stem":1561},"Azure Adapter","/hosting/hyperscaler/azure-adapter","4.hosting/1.hyperscaler/azure-adapter",{"title":1563,"path":1564,"stem":1565},"Google Adapter","/hosting/hyperscaler/google-adapter","4.hosting/1.hyperscaler/google-adapter",{"title":1567,"path":1568,"stem":1569},"Netlify Adapter","/hosting/hyperscaler/netlify-adapter","4.hosting/1.hyperscaler/netlify-adapter",{"title":1571,"path":1572,"stem":1573},"Vercel Adapter","/hosting/hyperscaler/vercel-adapter","4.hosting/1.hyperscaler/vercel-adapter",{"title":1575,"path":1576,"stem":1577,"children":1578},"Native Hosting","/hosting/native-hosting-providers","4.hosting/2.native-hosting-providers/0.index",[1579,1580,1584,1588],{"title":1575,"path":1576,"stem":1577},{"title":1581,"path":1582,"stem":1583},"maxcluster","/hosting/native-hosting-providers/maxcluster","4.hosting/2.native-hosting-providers/maxcluster",{"title":1585,"path":1586,"stem":1587},"profihost","/hosting/native-hosting-providers/profihost","4.hosting/2.native-hosting-providers/profihost",{"title":1589,"path":1590,"stem":1591},"ScaleCommerce","/hosting/native-hosting-providers/scale-commerce","4.hosting/2.native-hosting-providers/scale-commerce",{"title":1593,"path":1594,"stem":1595,"children":1596},"Bring Your Own Server (BYOS)","/hosting/bring-your-own-server-byos","4.hosting/3.bring-your-own-server-byos/0.index",[1597,1598,1602,1606,1610,1614,1618],{"title":1593,"path":1594,"stem":1595},{"title":1599,"path":1600,"stem":1601},"BYOS Agent","/hosting/bring-your-own-server-byos/byos-agent","4.hosting/3.bring-your-own-server-byos/byos-agent",{"title":1603,"path":1604,"stem":1605},"Changelog","/hosting/bring-your-own-server-byos/changelog","4.hosting/3.bring-your-own-server-byos/changelog",{"title":1607,"path":1608,"stem":1609},"DevOps Components","/hosting/bring-your-own-server-byos/devops","4.hosting/3.bring-your-own-server-byos/devops",{"title":1611,"path":1612,"stem":1613},"Infrastructure Requirements","/hosting/bring-your-own-server-byos/infrastructure","4.hosting/3.bring-your-own-server-byos/infrastructure",{"title":1615,"path":1616,"stem":1617},"Software Requirements","/hosting/bring-your-own-server-byos/software","4.hosting/3.bring-your-own-server-byos/software",{"title":1619,"path":1620,"stem":1621},"Webhook Configuration","/hosting/bring-your-own-server-byos/webhook-config","4.hosting/3.bring-your-own-server-byos/webhook-config",{"title":1623,"path":1624,"stem":1625,"children":1626},"Checkout","/checkout","5.Checkout/0.index",[1627],{"title":1623,"path":1624,"stem":1625},{"title":1629,"path":1630,"stem":1631,"children":1632},"Larry AI","/larry-ai","6.Larry-AI/0.index",[1633],{"title":1629,"path":1630,"stem":1631},{"title":671,"path":1635,"stem":1636,"children":1637},"/figma-kit","7.Figma Kit/0.index",[1638,1639,1655],{"title":671,"path":1635,"stem":1636},{"title":121,"path":1640,"stem":1641,"children":1642,"page":55},"/figma-kit/introduction","7.Figma Kit/1.Introduction",[1643,1647,1651],{"title":1644,"path":1645,"stem":1646},"How to Start","/figma-kit/introduction/howtostart","7.Figma Kit/1.Introduction/0.howtostart",{"title":1648,"path":1649,"stem":1650},"Figma Variables","/figma-kit/introduction/figma-variables","7.Figma Kit/1.Introduction/figma-variables",{"title":1652,"path":1653,"stem":1654},"Library Connections","/figma-kit/introduction/library-connections","7.Figma Kit/1.Introduction/library-connections",{"title":1656,"path":1657,"stem":1658,"children":1659,"page":55},"Kits","/figma-kit/kits","7.Figma Kit/Kits",[1660,1663,1666,1669,1673,1676,1680,1684,1687,1690],{"title":686,"path":1661,"stem":1662},"/figma-kit/kits/b2b","7.Figma Kit/Kits/b2b",{"title":692,"path":1664,"stem":1665},"/figma-kit/kits/booking","7.Figma Kit/Kits/booking",{"title":698,"path":1667,"stem":1668},"/figma-kit/kits/cms","7.Figma Kit/Kits/cms",{"title":1670,"path":1671,"stem":1672},"Inpage Navigation","/figma-kit/kits/inpage-navigation","7.Figma Kit/Kits/inpage-navigation",{"title":903,"path":1674,"stem":1675},"/figma-kit/kits/marketplace","7.Figma Kit/Kits/marketplace",{"title":1677,"path":1678,"stem":1679},"Retail & Multichannel","/figma-kit/kits/multichannel","7.Figma Kit/Kits/multichannel",{"title":1681,"path":1682,"stem":1683},"Navigation","/figma-kit/kits/navigation","7.Figma Kit/Kits/navigation",{"title":969,"path":1685,"stem":1686},"/figma-kit/kits/saas","7.Figma Kit/Kits/saas",{"title":987,"path":1688,"stem":1689},"/figma-kit/kits/shop","7.Figma Kit/Kits/shop",{"title":1117,"path":1691,"stem":1692},"/figma-kit/kits/ui-kit","7.Figma Kit/Kits/ui-kit",{"title":1694,"path":1695,"stem":1696,"children":1697},"Cockpit","/cockpit","8.Cockpit/0.index",[1698,1699,1729,1746,1763],{"title":1694,"path":1695,"stem":1696},{"title":154,"path":1700,"stem":1701,"children":1702,"page":55},"/cockpit/features","8.Cockpit/1.Features",[1703,1706,1710,1714,1718,1721,1725],{"title":464,"path":1704,"stem":1705},"/cockpit/features/apps","8.Cockpit/1.Features/apps",{"title":1707,"path":1708,"stem":1709},"Content (Collections)","/cockpit/features/content-collections","8.Cockpit/1.Features/content-collections",{"title":1711,"path":1712,"stem":1713},"Deployments","/cockpit/features/deployments","8.Cockpit/1.Features/deployments",{"title":1715,"path":1716,"stem":1717},"Markets","/cockpit/features/markets","8.Cockpit/1.Features/markets",{"title":196,"path":1719,"stem":1720},"/cockpit/features/redirects","8.Cockpit/1.Features/redirects",{"title":1722,"path":1723,"stem":1724},"Studio","/cockpit/features/studio","8.Cockpit/1.Features/studio",{"title":1726,"path":1727,"stem":1728},"Translations","/cockpit/features/translations","8.Cockpit/1.Features/translations",{"title":1730,"path":1731,"stem":1732,"children":1733,"page":55},"Project Settings","/cockpit/project-settings","8.Cockpit/2.Project-Settings",[1734,1738,1742],{"title":1735,"path":1736,"stem":1737},"Delete a project","/cockpit/project-settings/delete-project","8.Cockpit/2.Project-Settings/delete-project",{"title":1739,"path":1740,"stem":1741},"NPM","/cockpit/project-settings/npm","8.Cockpit/2.Project-Settings/npm",{"title":1743,"path":1744,"stem":1745},"Project secret key","/cockpit/project-settings/project-secret-key","8.Cockpit/2.Project-Settings/project-secret-key",{"title":1747,"path":1748,"stem":1749,"children":1750,"page":55},"Account Settings","/cockpit/account-settings","8.Cockpit/3.Account-Settings",[1751,1755,1759],{"title":1752,"path":1753,"stem":1754},"Notifications","/cockpit/account-settings/notifications","8.Cockpit/3.Account-Settings/notifications",{"title":1756,"path":1757,"stem":1758},"Preferences","/cockpit/account-settings/preferences","8.Cockpit/3.Account-Settings/preferences",{"title":1760,"path":1761,"stem":1762},"Security","/cockpit/account-settings/security","8.Cockpit/3.Account-Settings/security",{"title":1764,"path":1765,"stem":1766,"children":1767,"page":55},"Organisation Settings","/cockpit/organisation-settings","8.Cockpit/4.Organisation-Settings",[1768,1772,1776,1780,1784,1788],{"title":1769,"path":1770,"stem":1771},"API keys","/cockpit/organisation-settings/api-keys","8.Cockpit/4.Organisation-Settings/api-keys",{"title":1773,"path":1774,"stem":1775},"Billing","/cockpit/organisation-settings/billing","8.Cockpit/4.Organisation-Settings/billing",{"title":1777,"path":1778,"stem":1779},"General settings","/cockpit/organisation-settings/general-settings","8.Cockpit/4.Organisation-Settings/general-settings",{"title":1781,"path":1782,"stem":1783},"Members","/cockpit/organisation-settings/members","8.Cockpit/4.Organisation-Settings/members",{"title":1785,"path":1786,"stem":1787},"Projects","/cockpit/organisation-settings/projects","8.Cockpit/4.Organisation-Settings/projects",{"title":1789,"path":1790,"stem":1791},"Roles","/cockpit/organisation-settings/roles","8.Cockpit/4.Organisation-Settings/roles",{"title":1793,"path":1794,"stem":1795,"children":1796},"Offering","/offering","9.Offering/0.index",[1797,1798,1830,1843,1856,1890,1899],{"title":1793,"path":1794,"stem":1795},{"title":1799,"path":1800,"stem":1801,"children":1802},"Products","/offering/products","9.Offering/1.Products/0.index",[1803,1804,1809,1814,1819,1825],{"title":1799,"path":1800,"stem":1801},{"title":137,"path":1805,"stem":1806,"children":1807},"/offering/products/frontend","9.Offering/1.Products/1.Frontend/0.index",[1808],{"title":137,"path":1805,"stem":1806},{"title":1694,"path":1810,"stem":1811,"children":1812},"/offering/products/cockpit","9.Offering/1.Products/2.Cockpit/0.index",[1813],{"title":1694,"path":1810,"stem":1811},{"title":1623,"path":1815,"stem":1816,"children":1817},"/offering/products/checkout","9.Offering/1.Products/3.Checkout/0.index",[1818],{"title":1623,"path":1815,"stem":1816},{"title":1820,"path":1821,"stem":1822,"children":1823},"Cloud","/offering/products/cloud","9.Offering/1.Products/4.cloud/0.index",[1824],{"title":1820,"path":1821,"stem":1822},{"title":1629,"path":1826,"stem":1827,"children":1828},"/offering/products/larry-ai","9.Offering/1.Products/5.larry-ai/0.index",[1829],{"title":1629,"path":1826,"stem":1827},{"title":1831,"path":1832,"stem":1833,"children":1834,"page":55},"Service Level Agreement","/offering/service-level-agreement","9.Offering/2.service-level-agreement",[1835,1839],{"title":1836,"path":1837,"stem":1838},"Standard Service Level Agreement Composable Frontend","/offering/service-level-agreement/standard-service-level-agreement","9.Offering/2.service-level-agreement/1.standard-service-level-agreement",{"title":1840,"path":1841,"stem":1842},"Backups","/offering/service-level-agreement/backups","9.Offering/2.service-level-agreement/backups",{"title":1844,"path":1845,"stem":1846,"children":1847,"page":55},"Customer Support","/offering/customer-support","9.Offering/3.customer-support",[1848,1852],{"title":1849,"path":1850,"stem":1851},"Standard Customer Support","/offering/customer-support/standard-customer-support","9.Offering/3.customer-support/1.standard-customer-support",{"title":1853,"path":1854,"stem":1855},"Customer Support Severity Levels of Laioutr products","/offering/customer-support/maximum-serverity-levels","9.Offering/3.customer-support/maximum-serverity-levels",{"title":1857,"path":1858,"stem":1859,"children":1860},"Trust Center","/offering/trust-center","9.Offering/4.trust-center/0.index",[1861,1862,1866,1870,1874,1878,1882,1886],{"title":1857,"path":1858,"stem":1859},{"title":1863,"path":1864,"stem":1865},"Data Protection (GDPR)","/offering/trust-center/data-protection","9.Offering/4.trust-center/1.data-protection",{"title":1867,"path":1868,"stem":1869},"Subprocessors","/offering/trust-center/subprocessors","9.Offering/4.trust-center/2.subprocessors",{"title":1871,"path":1872,"stem":1873},"Infrastructure & Hosting","/offering/trust-center/infrastructure","9.Offering/4.trust-center/3.infrastructure",{"title":1875,"path":1876,"stem":1877},"Security Measures","/offering/trust-center/security-measures","9.Offering/4.trust-center/4.security-measures",{"title":1879,"path":1880,"stem":1881},"Incident Response","/offering/trust-center/incident-response","9.Offering/4.trust-center/5.incident-response",{"title":1883,"path":1884,"stem":1885},"Compliance & Certifications","/offering/trust-center/compliance","9.Offering/4.trust-center/6.compliance",{"title":1887,"path":1888,"stem":1889},"FAQ","/offering/trust-center/faq","9.Offering/4.trust-center/7.faq",{"title":1891,"path":1892,"stem":1893,"children":1894,"page":55},"Policies","/offering/policies","9.Offering/5.policies",[1895],{"title":1896,"path":1897,"stem":1898},"Fair usage policy","/offering/policies/fair-usage-policy","9.Offering/5.policies/fair-usage-policy",{"title":1900,"path":1901,"stem":1902,"children":1903},"Academy","/offering/academy","9.Offering/6.academy/0.index",[1904],{"title":1900,"path":1901,"stem":1902},{"id":1906,"title":387,"aliases":1907,"body":1908,"changelogKeys":4070,"description":4072,"extension":2161,"links":4073,"meta":4074,"navigation":2518,"path":1168,"playground":4075,"seo":4079,"sitemap":4082,"stem":1169,"__hash__":4087},"docs/3.laioutr-ui/ui-kit/01.general/Media.md",[],{"type":1909,"value":1910,"toc":4045},"minimark",[1911,1916,1937,1995,2004,2014,2018,2041,2045,2049,2056,2066,2140,2163,2168,2198,2219,2243,2250,2256,2261,2312,2334,2338,2355,2408,2415,2432,2621,2639,2642,2648,2666,2670,2679,2744,2747,2875,2887,2927,2938,2942,2945,2964,3015,3022,3027,3041,3045,3066,3378,3386,3390,3418,3425,3429,3436,3584,3591,3595,3647,3661,3688,3699,3941,3958,3966,3970,3975,4033,4036,4039,4042],[1912,1913,1915],"h2",{"id":1914},"overview","Overview",[1917,1918,1919,1922,1923,1925,1926,1929,1930,1932,1933,1936],"p",{},[1920,1921,387],"code",{}," takes a ",[1920,1924,387],{}," value and renders it. The value is a discriminated union, so a single ",[1920,1927,1928],{},"\u003CMedia :media>"," call site can receive an image, a video, or an audio asset. ",[1920,1931,387],{}," looks at ",[1920,1934,1935],{},"media.type"," and dispatches:",[1938,1939,1940,1971],"ul",{},[1941,1942,1943,1947,1948,1951,1952,1955,1956,1959,1960,1963,1964,1967,1968,1970],"li",{},[1944,1945,1946],"strong",{},"Images"," render with the built-in renderer, backed by ",[1920,1949,1950],{},"nuxt-image",". It picks the right variant for the current viewport and handles ",[1920,1953,1954],{},"\u003Cpicture>"," source selection, custom ",[1920,1957,1958],{},"aspectRatio"," (boolean, string, or number), and breakpoint-aware ",[1920,1961,1962],{},"sizes"," strings. The bonus ",[1920,1965,1966],{},"cmw"," (content-max-width) unit makes ",[1920,1969,1962],{}," strings inside constrained containers easier to write.",[1941,1972,1973,1976,1977,1980,1981,1984,1985,1988,1989,1994],{},[1944,1974,1975],{},"Video and audio"," render with built-in native players (",[1920,1978,1979],{},"\u003Cvideo>"," / ",[1920,1982,1983],{},"\u003Caudio>","). Playback is set with props on ",[1920,1986,1987],{},"\u003CMedia>",". Register your own renderer to override the built-in for a type (for example a Vidstack wrapper for adaptive streaming). See ",[1990,1991,1993],"a",{"href":1992},"#rendering-video-and-audio","Rendering video and audio",".",[1917,1996,1997,1998,2000,2001,2003],{},"The image prop surface is unchanged from when ",[1920,1999,387],{}," was image-only, so every existing ",[1920,2002,1928],{}," call site keeps working. A call site that passes an image renders exactly as before; the same call site now also plays a video or audio asset, with no per-call-site change.",[1917,2005,2006,2007,2010,2011,2013],{},"Reach for ",[1920,2008,2009],{},"MediaPreview"," when you also want lightbox interaction, surface-tone awareness, and cross-image navigation. Use ",[1920,2012,387],{}," directly only when you do not want the lightbox shell.",[1912,2015,2017],{"id":2016},"key-business-ux-benefits","Key Business & UX Benefits",[1938,2019,2020,2023,2029,2032],{},[1941,2021,2022],{},"Backed by nuxt-image, so every storefront image ships in the right format and size for the device, cutting bandwidth costs and load times.",[1941,2024,2025,2026,2028],{},"A single discriminated ",[1920,2027,387],{}," value covers images, video, and audio, so connector and block code routes any asset through one component instead of hand-writing type branches.",[1941,2030,2031],{},"Video and audio play out of the box with native players, and a one-line registration swaps in your own player for streaming or custom UI without forking the component.",[1941,2033,2034,2035,2037,2038,2040],{},"The ",[1920,2036,1966],{}," unit makes ",[1920,2039,1962],{}," strings inside constrained containers easy to write, so the layout engine picks the smallest correct asset.",[1912,2042,2044],{"id":2043},"feature-list","Feature List",[2046,2047],"features",{":items":2048},"[\"Backed by nuxt-image, so every storefront image ships in the right format and size for the current device\",\"Single typed `Media` value (discriminated union) renders images, video, and audio through one component\",\"Video and audio play out of the box with built-in native players; register your own renderer to override a type for streaming or custom UI\",\"A `playback` mode (`interactive` default, or `background` for a muted autoplay loop) sets video/audio behavior per placement; the individual `controls` / `autoplay` / `muted` / `loop` / `playsinline` / `disablePictureInPicture` props map 1:1 to native HTML and override the mode\",\"`playback=\\\"background\\\"` runs a decorative video loop (autoplay suppressed under reduced motion); `v-model:paused` lets the consumer render and place its own WCAG-compliant pause control\",\"`aspectRatio` accepts boolean, string, or number, so callers pick between intrinsic, square, and named ratios from the same prop\",\"Breakpoint-aware `sizes` strings hint the browser to pick the smallest correct variant, cutting bandwidth on mobile\",\"Custom `cmw` (content-max-width) unit in `sizes` strings is honored inside constrained containers\",\"Handles `\u003Cpicture>` source selection so AVIF, WebP, and JPEG fallbacks are emitted correctly\"]",[1912,2050,2052,2053,2055],{"id":2051},"sizing-images-with-the-sizes-prop","Sizing images with the ",[1920,2054,1962],{}," prop",[1917,2057,2058,2059,2061,2062,2065],{},"Without a hint, the browser assumes an image fills the whole viewport and downloads the largest variant that could fit, even when the image occupies only part of the screen. The ",[1920,2060,1962],{}," prop tells the browser how wide the image actually renders at each breakpoint, so nuxt-image generates a matching ",[1920,2063,2064],{},"srcset"," and the browser picks the smallest adequate file.",[2067,2068,2073],"pre",{"className":2069,"code":2070,"language":2071,"meta":2072,"style":2072},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003CMedia :media=\"product.cover\" sizes=\"100vw sm:50vw md:400px\" />\n\u003C/template>\n","vue","",[1920,2074,2075,2091,2130],{"__ignoreMap":2072},[2076,2077,2080,2084,2088],"span",{"class":2078,"line":2079},"line",1,[2076,2081,2083],{"class":2082},"sMK4o","\u003C",[2076,2085,2087],{"class":2086},"swJcz","template",[2076,2089,2090],{"class":2082},">\n",[2076,2092,2094,2097,2099,2103,2106,2109,2113,2115,2118,2120,2122,2125,2127],{"class":2078,"line":2093},2,[2076,2095,2096],{"class":2082},"  \u003C",[2076,2098,387],{"class":2086},[2076,2100,2102],{"class":2101},"spNyl"," :media",[2076,2104,2105],{"class":2082},"=",[2076,2107,2108],{"class":2082},"\"",[2076,2110,2112],{"class":2111},"sfazB","product.cover",[2076,2114,2108],{"class":2082},[2076,2116,2117],{"class":2101}," sizes",[2076,2119,2105],{"class":2082},[2076,2121,2108],{"class":2082},[2076,2123,2124],{"class":2111},"100vw sm:50vw md:400px",[2076,2126,2108],{"class":2082},[2076,2128,2129],{"class":2082}," />\n",[2076,2131,2133,2136,2138],{"class":2078,"line":2132},3,[2076,2134,2135],{"class":2082},"\u003C/",[2076,2137,2087],{"class":2086},[2076,2139,2090],{"class":2082},[1917,2141,2142,2143,2146,2147,2150,2151,2154,2155,2158,2159,2162],{},"Read that as: the image is ",[1920,2144,2145],{},"100vw"," wide by default, ",[1920,2148,2149],{},"50vw"," from the ",[1920,2152,2153],{},"sm"," breakpoint up, and a fixed ",[1920,2156,2157],{},"400px"," from ",[1920,2160,2161],{},"md"," up.",[2164,2165,2167],"h3",{"id":2166},"the-format","The format",[1917,2169,2170,2172,2173,2176,2177,2180,2181,2180,2184,2180,2186,2180,2188,2180,2191,2180,2194,2197],{},[1920,2171,1962],{}," is a space-separated list of ",[1920,2174,2175],{},"breakpoint:width"," pairs built on the laioutr-ui theme breakpoints (",[1920,2178,2179],{},"xs",", ",[1920,2182,2183],{},"s",[1920,2185,2153],{},[1920,2187,2161],{},[1920,2189,2190],{},"lg",[1920,2192,2193],{},"xl",[1920,2195,2196],{},"xxl","):",[1938,2199,2200,2203,2206],{},[1941,2201,2202],{},"A value with no breakpoint prefix is the base size, applied from the smallest viewport up.",[1941,2204,2205],{},"Each prefixed pair applies from its breakpoint upward and overrides the previous one (mobile-first).",[1941,2207,2208,2209,2211,2212,2215,2216,1994],{},"Widths accept any unit a CSS ",[1920,2210,1962],{}," attribute understands, such as ",[1920,2213,2214],{},"vw"," and ",[1920,2217,2218],{},"px",[1917,2220,2221,2224,2225,2227,2228,2180,2230,2158,2232,2234,2235,2237,2238,2158,2241,2162],{},[1920,2222,2223],{},"sizes=\"100vw md:50vw xl:600px\""," is ",[1920,2226,2145],{}," below ",[1920,2229,2161],{},[1920,2231,2149],{},[1920,2233,2161],{}," to just under ",[1920,2236,2193],{},", and ",[1920,2239,2240],{},"600px",[1920,2242,2193],{},[1917,2244,2245,2246,2249],{},"A single viewport-relative value is shorthand for that width on every breakpoint. ",[1920,2247,2248],{},"sizes=\"50vw\""," becomes 50vw across all viewports.",[2164,2251,2034,2253,2255],{"id":2252},"the-cmw-unit",[1920,2254,1966],{}," unit",[1917,2257,2258,2260],{},[1920,2259,1966],{}," (content-max-width) expresses a width as a percentage of the theme's content max-width at that breakpoint instead of the full viewport. Reach for it when the image sits inside a width-constrained container, such as the main content column, rather than bleeding to the screen edge.",[2067,2262,2264],{"className":2069,"code":2263,"language":2071,"meta":2072,"style":2072},"\u003Ctemplate>\n  \u003CMedia :media=\"article.hero\" sizes=\"100vw md:50cmw\" />\n\u003C/template>\n",[1920,2265,2266,2274,2304],{"__ignoreMap":2072},[2076,2267,2268,2270,2272],{"class":2078,"line":2079},[2076,2269,2083],{"class":2082},[2076,2271,2087],{"class":2086},[2076,2273,2090],{"class":2082},[2076,2275,2276,2278,2280,2282,2284,2286,2289,2291,2293,2295,2297,2300,2302],{"class":2078,"line":2093},[2076,2277,2096],{"class":2082},[2076,2279,387],{"class":2086},[2076,2281,2102],{"class":2101},[2076,2283,2105],{"class":2082},[2076,2285,2108],{"class":2082},[2076,2287,2288],{"class":2111},"article.hero",[2076,2290,2108],{"class":2082},[2076,2292,2117],{"class":2101},[2076,2294,2105],{"class":2082},[2076,2296,2108],{"class":2082},[2076,2298,2299],{"class":2111},"100vw md:50cmw",[2076,2301,2108],{"class":2082},[2076,2303,2129],{"class":2082},[2076,2305,2306,2308,2310],{"class":2078,"line":2132},[2076,2307,2135],{"class":2082},[2076,2309,2087],{"class":2086},[2076,2311,2090],{"class":2082},[1917,2313,2314,2317,2318,2320,2321,2323,2324,2326,2327,2330,2331,1994],{},[1920,2315,2316],{},"50cmw"," resolves to half of the content max-width configured for that breakpoint. ",[1920,2319,387],{}," looks up the breakpoint's content max-width in your theme and rewrites the ",[1920,2322,1966],{}," value to the equivalent ",[1920,2325,2218],{}," before handing the string to nuxt-image; with the default theme, ",[1920,2328,2329],{},"md:50cmw"," becomes roughly ",[1920,2332,2333],{},"640px",[2164,2335,2337],{"id":2336},"high-density-screens","High-density screens",[1917,2339,2340,2342,2343,2346,2347,2350,2351,2354],{},[1920,2341,387],{}," serves ",[1920,2344,2345],{},"1x","-density images by default. Set ",[1920,2348,2349],{},"retina"," to also emit ",[1920,2352,2353],{},"2x"," variants for high-DPI screens:",[2067,2356,2358],{"className":2069,"code":2357,"language":2071,"meta":2072,"style":2072},"\u003Ctemplate>\n  \u003CMedia :media=\"product.cover\" sizes=\"md:400px\" retina />\n\u003C/template>\n",[1920,2359,2360,2368,2400],{"__ignoreMap":2072},[2076,2361,2362,2364,2366],{"class":2078,"line":2079},[2076,2363,2083],{"class":2082},[2076,2365,2087],{"class":2086},[2076,2367,2090],{"class":2082},[2076,2369,2370,2372,2374,2376,2378,2380,2382,2384,2386,2388,2390,2393,2395,2398],{"class":2078,"line":2093},[2076,2371,2096],{"class":2082},[2076,2373,387],{"class":2086},[2076,2375,2102],{"class":2101},[2076,2377,2105],{"class":2082},[2076,2379,2108],{"class":2082},[2076,2381,2112],{"class":2111},[2076,2383,2108],{"class":2082},[2076,2385,2117],{"class":2101},[2076,2387,2105],{"class":2082},[2076,2389,2108],{"class":2082},[2076,2391,2392],{"class":2111},"md:400px",[2076,2394,2108],{"class":2082},[2076,2396,2397],{"class":2101}," retina",[2076,2399,2129],{"class":2082},[2076,2401,2402,2404,2406],{"class":2078,"line":2132},[2076,2403,2135],{"class":2082},[2076,2405,2087],{"class":2086},[2076,2407,2090],{"class":2082},[2164,2409,2411,2412,2414],{"id":2410},"providing-a-default-sizes-to-a-subtree","Providing a default ",[1920,2413,1962],{}," to a subtree",[1917,2416,2417,2418,2420,2421,2424,2425,2427,2428,2431],{},"Instead of repeating ",[1920,2419,1962],{}," on every call site, wrap a subtree in ",[1920,2422,2423],{},"MediaSizesProvider"," and set one default. Every ",[1920,2426,1987],{}," rendered inside it inherits that value. The provider takes the sizes as a ref through its ",[1920,2429,2430],{},"value"," prop:",[2067,2433,2435],{"className":2069,"code":2434,"language":2071,"meta":2072,"style":2072},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { MediaSizesProvider } from '#ui-kit/components/Media/MediaSizesProvider';\n\nconst sizes = ref('100vw md:50cmw');\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CMediaSizesProvider :value=\"sizes\">\n    \u003Cslot />\n  \u003C/MediaSizesProvider>\n\u003C/template>\n",[1920,2436,2437,2461,2491,2513,2520,2548,2557,2562,2571,2591,2602,2612],{"__ignoreMap":2072},[2076,2438,2439,2441,2444,2447,2450,2452,2454,2457,2459],{"class":2078,"line":2079},[2076,2440,2083],{"class":2082},[2076,2442,2443],{"class":2086},"script",[2076,2445,2446],{"class":2101}," setup",[2076,2448,2449],{"class":2101}," lang",[2076,2451,2105],{"class":2082},[2076,2453,2108],{"class":2082},[2076,2455,2456],{"class":2111},"ts",[2076,2458,2108],{"class":2082},[2076,2460,2090],{"class":2082},[2076,2462,2463,2467,2470,2474,2477,2480,2483,2485,2488],{"class":2078,"line":2093},[2076,2464,2466],{"class":2465},"s7zQu","import",[2076,2468,2469],{"class":2082}," {",[2076,2471,2473],{"class":2472},"sTEyZ"," ref",[2076,2475,2476],{"class":2082}," }",[2076,2478,2479],{"class":2465}," from",[2076,2481,2482],{"class":2082}," '",[2076,2484,2071],{"class":2111},[2076,2486,2487],{"class":2082},"'",[2076,2489,2490],{"class":2082},";\n",[2076,2492,2493,2495,2497,2500,2502,2504,2506,2509,2511],{"class":2078,"line":2132},[2076,2494,2466],{"class":2465},[2076,2496,2469],{"class":2082},[2076,2498,2499],{"class":2472}," MediaSizesProvider",[2076,2501,2476],{"class":2082},[2076,2503,2479],{"class":2465},[2076,2505,2482],{"class":2082},[2076,2507,2508],{"class":2111},"#ui-kit/components/Media/MediaSizesProvider",[2076,2510,2487],{"class":2082},[2076,2512,2490],{"class":2082},[2076,2514,2516],{"class":2078,"line":2515},4,[2076,2517,2519],{"emptyLinePlaceholder":2518},true,"\n",[2076,2521,2523,2526,2529,2531,2534,2537,2539,2541,2543,2546],{"class":2078,"line":2522},5,[2076,2524,2525],{"class":2101},"const",[2076,2527,2528],{"class":2472}," sizes ",[2076,2530,2105],{"class":2082},[2076,2532,2473],{"class":2533},"s2Zo4",[2076,2535,2536],{"class":2472},"(",[2076,2538,2487],{"class":2082},[2076,2540,2299],{"class":2111},[2076,2542,2487],{"class":2082},[2076,2544,2545],{"class":2472},")",[2076,2547,2490],{"class":2082},[2076,2549,2551,2553,2555],{"class":2078,"line":2550},6,[2076,2552,2135],{"class":2082},[2076,2554,2443],{"class":2086},[2076,2556,2090],{"class":2082},[2076,2558,2560],{"class":2078,"line":2559},7,[2076,2561,2519],{"emptyLinePlaceholder":2518},[2076,2563,2565,2567,2569],{"class":2078,"line":2564},8,[2076,2566,2083],{"class":2082},[2076,2568,2087],{"class":2086},[2076,2570,2090],{"class":2082},[2076,2572,2574,2576,2578,2581,2583,2585,2587,2589],{"class":2078,"line":2573},9,[2076,2575,2096],{"class":2082},[2076,2577,2423],{"class":2086},[2076,2579,2580],{"class":2101}," :value",[2076,2582,2105],{"class":2082},[2076,2584,2108],{"class":2082},[2076,2586,1962],{"class":2111},[2076,2588,2108],{"class":2082},[2076,2590,2090],{"class":2082},[2076,2592,2594,2597,2600],{"class":2078,"line":2593},10,[2076,2595,2596],{"class":2082},"    \u003C",[2076,2598,2599],{"class":2086},"slot",[2076,2601,2129],{"class":2082},[2076,2603,2605,2608,2610],{"class":2078,"line":2604},11,[2076,2606,2607],{"class":2082},"  \u003C/",[2076,2609,2423],{"class":2086},[2076,2611,2090],{"class":2082},[2076,2613,2615,2617,2619],{"class":2078,"line":2614},12,[2076,2616,2135],{"class":2082},[2076,2618,2087],{"class":2086},[2076,2620,2090],{"class":2082},[1917,2622,2623,2624,2626,2627,2629,2630,2632,2633,2635,2636,2638],{},"A provided value overrides the ",[1920,2625,1962],{}," prop on the ",[1920,2628,1987],{}," elements below it. So once ",[1920,2631,2423],{}," sets sizes, setting ",[1920,2634,1962],{}," on an individual descendant has no effect; change the provided value, or render that ",[1920,2637,1987],{}," outside the provider.",[1912,2640,1993],{"id":2641},"rendering-video-and-audio",[2643,2644],"since-version",{"changelog":2645,"packages":2646,"version":2647},"ui","@laioutr-core/ui-kit","2.3.0",[1917,2649,2650,2652,2653,2656,2657,2180,2659,2662,2663,2665],{},[1920,2651,1987],{}," plays video and audio out of the box with built-in native players: ",[1920,2654,2655],{},"type: 'video'"," renders a native ",[1920,2658,1979],{},[1920,2660,2661],{},"type: 'audio'"," a native ",[1920,2664,1983],{},". Pick a video in Studio and it plays, with no wiring. For adaptive streaming or a custom player UI, register your own renderer to override the built-in for that type.",[2164,2667,2669],{"id":2668},"playback","Playback",[1917,2671,2672,2673,2675,2676,2678],{},"Playback behavior is set with props on ",[1920,2674,1987],{},". The ",[1920,2677,2668],{}," prop picks the intent; six individual props map 1:1 to the native HTML attributes and override whatever the mode implies.",[2680,2681,2682,2696],"table",{},[2683,2684,2685],"thead",{},[2686,2687,2688,2693],"tr",{},[2689,2690,2691],"th",{},[1920,2692,2668],{},[2689,2694,2695],{},"What it renders",[2697,2698,2699,2715],"tbody",{},[2686,2700,2701,2708],{},[2702,2703,2704,2707],"td",{},[1920,2705,2706],{},"interactive"," (default)",[2702,2709,2710,2711,2714],{},"A native player: ",[1920,2712,2713],{},"controls"," on, nothing automatic.",[2686,2716,2717,2722],{},[2702,2718,2719],{},[1920,2720,2721],{},"background",[2702,2723,2724,2725,2180,2728,2180,2731,2180,2734,2237,2737,2740,2741,2743],{},"A decorative muted autoplay loop: ",[1920,2726,2727],{},"autoplay",[1920,2729,2730],{},"muted",[1920,2732,2733],{},"loop",[1920,2735,2736],{},"playsinline",[1920,2738,2739],{},"disablePictureInPicture"," on, ",[1920,2742,2713],{}," off. Video only.",[1917,2745,2746],{},"Each attribute also has its own prop. An explicitly set prop always wins; an unset prop takes the mode default, so you reach for these only to deviate from the mode:",[2680,2748,2749,2767],{},[2683,2750,2751],{},[2686,2752,2753,2756,2760,2764],{},[2689,2754,2755],{},"Prop",[2689,2757,2758],{},[1920,2759,2706],{},[2689,2761,2762],{},[1920,2763,2721],{},[2689,2765,2766],{},"Effect",[2697,2768,2769,2788,2807,2824,2841,2858],{},[2686,2770,2771,2775,2780,2785],{},[2702,2772,2773],{},[1920,2774,2713],{},[2702,2776,2777],{},[1920,2778,2779],{},"true",[2702,2781,2782],{},[1920,2783,2784],{},"false",[2702,2786,2787],{},"Show the browser's native playback controls",[2686,2789,2790,2794,2798,2802],{},[2702,2791,2792],{},[1920,2793,2727],{},[2702,2795,2796],{},[1920,2797,2784],{},[2702,2799,2800],{},[1920,2801,2779],{},[2702,2803,2804,2805,2545],{},"Start playback automatically (the browser also requires ",[1920,2806,2730],{},[2686,2808,2809,2813,2817,2821],{},[2702,2810,2811],{},[1920,2812,2730],{},[2702,2814,2815],{},[1920,2816,2784],{},[2702,2818,2819],{},[1920,2820,2779],{},[2702,2822,2823],{},"Mute the media",[2686,2825,2826,2830,2834,2838],{},[2702,2827,2828],{},[1920,2829,2733],{},[2702,2831,2832],{},[1920,2833,2784],{},[2702,2835,2836],{},[1920,2837,2779],{},[2702,2839,2840],{},"Restart when playback ends",[2686,2842,2843,2847,2851,2855],{},[2702,2844,2845],{},[1920,2846,2736],{},[2702,2848,2849],{},[1920,2850,2784],{},[2702,2852,2853],{},[1920,2854,2779],{},[2702,2856,2857],{},"Play inline on iOS instead of going fullscreen (video only)",[2686,2859,2860,2864,2868,2872],{},[2702,2861,2862],{},[1920,2863,2739],{},[2702,2865,2866],{},[1920,2867,2784],{},[2702,2869,2870],{},[1920,2871,2779],{},[2702,2873,2874],{},"Ask the browser to hide the Picture-in-Picture control (video only; a request, not a guarantee)",[1917,2876,2877,2878,2880,2881,2883,2884,2886],{},"These are deliberately not part of the ",[1920,2879,387],{}," value. A ",[1920,2882,387],{}," object describes the asset; whether a placement is a controllable player or a muted background loop is an editorial decision, so the calling component sets it. They apply to video (and to audio where meaningful); image media ignores them, and ",[1920,2885,2721],{}," is video-only. A controllable player needs no extra props:",[2067,2888,2890],{"className":2069,"code":2889,"language":2071,"meta":2072,"style":2072},"\u003Ctemplate>\n  \u003CMedia :media=\"episode.audio\" />\n\u003C/template>\n",[1920,2891,2892,2900,2919],{"__ignoreMap":2072},[2076,2893,2894,2896,2898],{"class":2078,"line":2079},[2076,2895,2083],{"class":2082},[2076,2897,2087],{"class":2086},[2076,2899,2090],{"class":2082},[2076,2901,2902,2904,2906,2908,2910,2912,2915,2917],{"class":2078,"line":2093},[2076,2903,2096],{"class":2082},[2076,2905,387],{"class":2086},[2076,2907,2102],{"class":2101},[2076,2909,2105],{"class":2082},[2076,2911,2108],{"class":2082},[2076,2913,2914],{"class":2111},"episode.audio",[2076,2916,2108],{"class":2082},[2076,2918,2129],{"class":2082},[2076,2920,2921,2923,2925],{"class":2078,"line":2132},[2076,2922,2135],{"class":2082},[2076,2924,2087],{"class":2086},[2076,2926,2090],{"class":2082},[1917,2928,2929,2931,2932,2934,2935,2937],{},[1920,2930,2727],{}," only takes effect when the media is also ",[1920,2933,2730],{},"; browsers block sound-on autoplay. ",[1920,2936,2721],{}," mode turns both on for you.",[2164,2939,2941],{"id":2940},"background-video","Background video",[2643,2943],{"changelog":2645,"packages":2646,"version":2944},"2.4.0",[1917,2946,2947,2950,2951,2180,2953,2180,2955,2180,2957,2237,2959,2740,2961,2963],{},[1920,2948,2949],{},"playback=\"background\""," turns a video into a decorative loop with one switch — ",[1920,2952,2727],{},[1920,2954,2730],{},[1920,2956,2733],{},[1920,2958,2736],{},[1920,2960,2739],{},[1920,2962,2713],{}," off — instead of spelling out the whole cluster at every call site:",[2067,2965,2967],{"className":2069,"code":2966,"language":2071,"meta":2072,"style":2072},"\u003Ctemplate>\n  \u003CMedia :media=\"hero.video\" playback=\"background\" />\n\u003C/template>\n",[1920,2968,2969,2977,3007],{"__ignoreMap":2072},[2076,2970,2971,2973,2975],{"class":2078,"line":2079},[2076,2972,2083],{"class":2082},[2076,2974,2087],{"class":2086},[2076,2976,2090],{"class":2082},[2076,2978,2979,2981,2983,2985,2987,2989,2992,2994,2997,2999,3001,3003,3005],{"class":2078,"line":2093},[2076,2980,2096],{"class":2082},[2076,2982,387],{"class":2086},[2076,2984,2102],{"class":2101},[2076,2986,2105],{"class":2082},[2076,2988,2108],{"class":2082},[2076,2990,2991],{"class":2111},"hero.video",[2076,2993,2108],{"class":2082},[2076,2995,2996],{"class":2101}," playback",[2076,2998,2105],{"class":2082},[2076,3000,2108],{"class":2082},[2076,3002,2721],{"class":2111},[2076,3004,2108],{"class":2082},[2076,3006,2129],{"class":2082},[2076,3008,3009,3011,3013],{"class":2078,"line":2132},[2076,3010,2135],{"class":2082},[2076,3012,2087],{"class":2086},[2076,3014,2090],{"class":2082},[1917,3016,3017,3018,3021],{},"Individual props still override the mode, so a background loop that plays once becomes ",[1920,3019,3020],{},"\u003CMedia :media=\"hero.video\" playback=\"background\" :loop=\"false\" />"," — the rest of the cluster stays on.",[3023,3024,3026],"h4",{"id":3025},"reduced-motion","Reduced motion",[1917,3028,3029,3030,3032,3033,3036,3037,3040],{},"A muted autoplay loop is decorative motion, so ",[1920,3031,1987],{}," suppresses autoplay for visitors who set ",[1920,3034,3035],{},"prefers-reduced-motion: reduce",". The video does not start on its own; it settles on its ",[1920,3038,3039],{},"poster"," frame, and the visitor can start it from the pause control you provide.",[3023,3042,3044],{"id":3043},"pausing-a-background-video","Pausing a background video",[1917,3046,3047,3048,3054,3055,3057,3058,3061,3062,3065],{},"Auto-playing motion that runs longer than five seconds needs a pause mechanism (",[1990,3049,3053],{"href":3050,"rel":3051},"https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html",[3052],"nofollow","WCAG 2.2.2","). ",[1920,3056,1987],{}," ships no pause button of its own — where it sits is a layout decision — so it exposes the paused state through ",[1920,3059,3060],{},"v-model:paused"," and leaves the control to you. Bind a ",[1920,3063,3064],{},"ref"," and render your own button:",[2067,3067,3069],{"className":2069,"code":3068,"language":2071,"meta":2072,"style":2072},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue';\n\n// The consumer owns the paused state; \u003CMedia> seeds it on mount and keeps it in sync.\nconst paused = ref\u003Cboolean>();\nconst toggle = () => {\n  paused.value = !(paused.value ?? false);\n};\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv style=\"position: relative\">\n    \u003CMedia :media=\"hero.video\" playback=\"background\" v-model:paused=\"paused\" />\n    \u003CIconButton\n      style=\"position: absolute; inset-block-end: 1rem; inset-inline-end: 1rem\"\n      :icon=\"paused ? 'media/play' : 'media/pause'\"\n      :label=\"paused ? 'Play background video' : 'Pause background video'\"\n      @click=\"toggle\"\n    />\n  \u003C/div>\n\u003C/template>\n",[1920,3070,3071,3091,3111,3115,3121,3146,3164,3199,3204,3212,3216,3224,3245,3285,3293,3309,3324,3339,3354,3360,3369],{"__ignoreMap":2072},[2076,3072,3073,3075,3077,3079,3081,3083,3085,3087,3089],{"class":2078,"line":2079},[2076,3074,2083],{"class":2082},[2076,3076,2443],{"class":2086},[2076,3078,2446],{"class":2101},[2076,3080,2449],{"class":2101},[2076,3082,2105],{"class":2082},[2076,3084,2108],{"class":2082},[2076,3086,2456],{"class":2111},[2076,3088,2108],{"class":2082},[2076,3090,2090],{"class":2082},[2076,3092,3093,3095,3097,3099,3101,3103,3105,3107,3109],{"class":2078,"line":2093},[2076,3094,2466],{"class":2465},[2076,3096,2469],{"class":2082},[2076,3098,2473],{"class":2472},[2076,3100,2476],{"class":2082},[2076,3102,2479],{"class":2465},[2076,3104,2482],{"class":2082},[2076,3106,2071],{"class":2111},[2076,3108,2487],{"class":2082},[2076,3110,2490],{"class":2082},[2076,3112,3113],{"class":2078,"line":2132},[2076,3114,2519],{"emptyLinePlaceholder":2518},[2076,3116,3117],{"class":2078,"line":2515},[2076,3118,3120],{"class":3119},"sHwdD","// The consumer owns the paused state; \u003CMedia> seeds it on mount and keeps it in sync.\n",[2076,3122,3123,3125,3128,3130,3132,3134,3138,3141,3144],{"class":2078,"line":2522},[2076,3124,2525],{"class":2101},[2076,3126,3127],{"class":2472}," paused ",[2076,3129,2105],{"class":2082},[2076,3131,2473],{"class":2533},[2076,3133,2083],{"class":2082},[2076,3135,3137],{"class":3136},"sBMFI","boolean",[2076,3139,3140],{"class":2082},">",[2076,3142,3143],{"class":2472},"()",[2076,3145,2490],{"class":2082},[2076,3147,3148,3150,3153,3155,3158,3161],{"class":2078,"line":2550},[2076,3149,2525],{"class":2101},[2076,3151,3152],{"class":2472}," toggle ",[2076,3154,2105],{"class":2082},[2076,3156,3157],{"class":2082}," ()",[2076,3159,3160],{"class":2101}," =>",[2076,3162,3163],{"class":2082}," {\n",[2076,3165,3166,3169,3171,3173,3176,3179,3181,3184,3186,3188,3191,3195,3197],{"class":2078,"line":2559},[2076,3167,3168],{"class":2472},"  paused",[2076,3170,1994],{"class":2082},[2076,3172,2430],{"class":2472},[2076,3174,3175],{"class":2082}," =",[2076,3177,3178],{"class":2082}," !",[2076,3180,2536],{"class":2086},[2076,3182,3183],{"class":2472},"paused",[2076,3185,1994],{"class":2082},[2076,3187,2430],{"class":2472},[2076,3189,3190],{"class":2082}," ??",[2076,3192,3194],{"class":3193},"sfNiH"," false",[2076,3196,2545],{"class":2086},[2076,3198,2490],{"class":2082},[2076,3200,3201],{"class":2078,"line":2564},[2076,3202,3203],{"class":2082},"};\n",[2076,3205,3206,3208,3210],{"class":2078,"line":2573},[2076,3207,2135],{"class":2082},[2076,3209,2443],{"class":2086},[2076,3211,2090],{"class":2082},[2076,3213,3214],{"class":2078,"line":2593},[2076,3215,2519],{"emptyLinePlaceholder":2518},[2076,3217,3218,3220,3222],{"class":2078,"line":2604},[2076,3219,2083],{"class":2082},[2076,3221,2087],{"class":2086},[2076,3223,2090],{"class":2082},[2076,3225,3226,3228,3231,3234,3236,3238,3241,3243],{"class":2078,"line":2614},[2076,3227,2096],{"class":2082},[2076,3229,3230],{"class":2086},"div",[2076,3232,3233],{"class":2101}," style",[2076,3235,2105],{"class":2082},[2076,3237,2108],{"class":2082},[2076,3239,3240],{"class":2111},"position: relative",[2076,3242,2108],{"class":2082},[2076,3244,2090],{"class":2082},[2076,3246,3248,3250,3252,3254,3256,3258,3260,3262,3264,3266,3268,3270,3272,3275,3277,3279,3281,3283],{"class":2078,"line":3247},13,[2076,3249,2596],{"class":2082},[2076,3251,387],{"class":2086},[2076,3253,2102],{"class":2101},[2076,3255,2105],{"class":2082},[2076,3257,2108],{"class":2082},[2076,3259,2991],{"class":2111},[2076,3261,2108],{"class":2082},[2076,3263,2996],{"class":2101},[2076,3265,2105],{"class":2082},[2076,3267,2108],{"class":2082},[2076,3269,2721],{"class":2111},[2076,3271,2108],{"class":2082},[2076,3273,3274],{"class":2101}," v-model:paused",[2076,3276,2105],{"class":2082},[2076,3278,2108],{"class":2082},[2076,3280,3183],{"class":2111},[2076,3282,2108],{"class":2082},[2076,3284,2129],{"class":2082},[2076,3286,3288,3290],{"class":2078,"line":3287},14,[2076,3289,2596],{"class":2082},[2076,3291,3292],{"class":2086},"IconButton\n",[2076,3294,3296,3299,3301,3303,3306],{"class":2078,"line":3295},15,[2076,3297,3298],{"class":2101},"      style",[2076,3300,2105],{"class":2082},[2076,3302,2108],{"class":2082},[2076,3304,3305],{"class":2111},"position: absolute; inset-block-end: 1rem; inset-inline-end: 1rem",[2076,3307,3308],{"class":2082},"\"\n",[2076,3310,3312,3315,3317,3319,3322],{"class":2078,"line":3311},16,[2076,3313,3314],{"class":2101},"      :icon",[2076,3316,2105],{"class":2082},[2076,3318,2108],{"class":2082},[2076,3320,3321],{"class":2111},"paused ? 'media/play' : 'media/pause'",[2076,3323,3308],{"class":2082},[2076,3325,3327,3330,3332,3334,3337],{"class":2078,"line":3326},17,[2076,3328,3329],{"class":2101},"      :label",[2076,3331,2105],{"class":2082},[2076,3333,2108],{"class":2082},[2076,3335,3336],{"class":2111},"paused ? 'Play background video' : 'Pause background video'",[2076,3338,3308],{"class":2082},[2076,3340,3342,3345,3347,3349,3352],{"class":2078,"line":3341},18,[2076,3343,3344],{"class":2101},"      @click",[2076,3346,2105],{"class":2082},[2076,3348,2108],{"class":2082},[2076,3350,3351],{"class":2111},"toggle",[2076,3353,3308],{"class":2082},[2076,3355,3357],{"class":2078,"line":3356},19,[2076,3358,3359],{"class":2082},"    />\n",[2076,3361,3363,3365,3367],{"class":2078,"line":3362},20,[2076,3364,2607],{"class":2082},[2076,3366,3230],{"class":2086},[2076,3368,2090],{"class":2082},[2076,3370,3372,3374,3376],{"class":2078,"line":3371},21,[2076,3373,2135],{"class":2082},[2076,3375,2087],{"class":2086},[2076,3377,2090],{"class":2082},[1917,3379,3380,3382,3383,3385],{},[1920,3381,1987],{}," seeds ",[1920,3384,3183],{}," on mount from the reduced-motion-aware autoplay decision, so the button reflects reality on first paint — it shows \"play\" when autoplay was suppressed. It also reflects browser-initiated pauses (a data-saver mode, a backgrounded tab) back into the binding, so the icon and label stay truthful.",[2164,3387,3389],{"id":3388},"what-the-built-in-players-handle","What the built-in players handle",[1917,3391,3392,3393,3395,3396,3398,3399,3401,3402,3405,3406,3409,3410,3413,3414,3417],{},"The built-in ",[1920,3394,1979],{}," shows the ",[1920,3397,3039],{}," image before playback, resolved through nuxt-image so provider-bound posters (Shopify, Cloudinary) work as expected. The built-in ",[1920,3400,1983],{}," has no native poster, so it renders the ",[1920,3403,3404],{},"cover"," image above the player. Both emit a ",[1920,3407,3408],{},"\u003Csource>"," per source and a ",[1920,3411,3412],{},"\u003Ctrack>"," per entry in ",[1920,3415,3416],{},"media.tracks"," for captions and chapters.",[1917,3419,3420,3421,1994],{},"The native elements play progressive sources (a self-contained MP4, WebM, or MP3). They do not switch responsive sources per viewport or demux adaptive streaming (HLS, DASH); that needs a JavaScript player, which is what a custom renderer is for. See ",[1990,3422,3424],{"href":3423},"/frontend/api-reference/common-types/media#streaming-formats","Streaming formats",[2164,3426,3428],{"id":3427},"overriding-with-a-custom-renderer","Overriding with a custom renderer",[1917,3430,3431,3432,3435],{},"Register a renderer for a media type to replace the built-in with a streaming player, a branded UI, or anything the native element cannot do. A registered renderer takes precedence over the built-in for its type. Register it from a Nuxt plugin at app root with ",[1920,3433,3434],{},"provideMediaRenderers",":",[2067,3437,3441],{"className":3438,"code":3439,"filename":3440,"language":2456,"meta":2072,"style":2072},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { defineNuxtPlugin } from '#imports';\nimport { provideMediaRenderers } from '#ui-kit/components/Media/MediaRenderersProvider';\nimport VidstackMedia from '../components/VidstackMedia.vue';\n\nexport default defineNuxtPlugin((nuxtApp) => {\n  provideMediaRenderers(nuxtApp.vueApp, {\n    video: VidstackMedia,\n  });\n});\n","plugins/media-renderers.ts",[1920,3442,3443,3465,3487,3506,3510,3534,3553,3566,3575],{"__ignoreMap":2072},[2076,3444,3445,3447,3449,3452,3454,3456,3458,3461,3463],{"class":2078,"line":2079},[2076,3446,2466],{"class":2465},[2076,3448,2469],{"class":2082},[2076,3450,3451],{"class":2472}," defineNuxtPlugin",[2076,3453,2476],{"class":2082},[2076,3455,2479],{"class":2465},[2076,3457,2482],{"class":2082},[2076,3459,3460],{"class":2111},"#imports",[2076,3462,2487],{"class":2082},[2076,3464,2490],{"class":2082},[2076,3466,3467,3469,3471,3474,3476,3478,3480,3483,3485],{"class":2078,"line":2093},[2076,3468,2466],{"class":2465},[2076,3470,2469],{"class":2082},[2076,3472,3473],{"class":2472}," provideMediaRenderers",[2076,3475,2476],{"class":2082},[2076,3477,2479],{"class":2465},[2076,3479,2482],{"class":2082},[2076,3481,3482],{"class":2111},"#ui-kit/components/Media/MediaRenderersProvider",[2076,3484,2487],{"class":2082},[2076,3486,2490],{"class":2082},[2076,3488,3489,3491,3494,3497,3499,3502,3504],{"class":2078,"line":2132},[2076,3490,2466],{"class":2465},[2076,3492,3493],{"class":2472}," VidstackMedia ",[2076,3495,3496],{"class":2465},"from",[2076,3498,2482],{"class":2082},[2076,3500,3501],{"class":2111},"../components/VidstackMedia.vue",[2076,3503,2487],{"class":2082},[2076,3505,2490],{"class":2082},[2076,3507,3508],{"class":2078,"line":2515},[2076,3509,2519],{"emptyLinePlaceholder":2518},[2076,3511,3512,3515,3518,3520,3522,3524,3528,3530,3532],{"class":2078,"line":2522},[2076,3513,3514],{"class":2465},"export",[2076,3516,3517],{"class":2465}," default",[2076,3519,3451],{"class":2533},[2076,3521,2536],{"class":2472},[2076,3523,2536],{"class":2082},[2076,3525,3527],{"class":3526},"sHdIc","nuxtApp",[2076,3529,2545],{"class":2082},[2076,3531,3160],{"class":2101},[2076,3533,3163],{"class":2082},[2076,3535,3536,3539,3541,3543,3545,3548,3551],{"class":2078,"line":2550},[2076,3537,3538],{"class":2533},"  provideMediaRenderers",[2076,3540,2536],{"class":2086},[2076,3542,3527],{"class":2472},[2076,3544,1994],{"class":2082},[2076,3546,3547],{"class":2472},"vueApp",[2076,3549,3550],{"class":2082},",",[2076,3552,3163],{"class":2082},[2076,3554,3555,3558,3560,3563],{"class":2078,"line":2559},[2076,3556,3557],{"class":2086},"    video",[2076,3559,3435],{"class":2082},[2076,3561,3562],{"class":2472}," VidstackMedia",[2076,3564,3565],{"class":2082},",\n",[2076,3567,3568,3571,3573],{"class":2078,"line":2564},[2076,3569,3570],{"class":2082},"  }",[2076,3572,2545],{"class":2086},[2076,3574,2490],{"class":2082},[2076,3576,3577,3580,3582],{"class":2078,"line":2573},[2076,3578,3579],{"class":2082},"}",[2076,3581,2545],{"class":2472},[2076,3583,2490],{"class":2082},[1917,3585,3586,3587,3590],{},"The map is keyed by media type; register only the types you want to override. Here just ",[1920,3588,3589],{},"video"," is registered, so audio keeps the built-in native renderer.",[2164,3592,3594],{"id":3593},"the-renderer-contract","The renderer contract",[1917,3596,3597,3598,3601,3602,3604,3605,2180,3607,2180,3609,2180,3611,2180,3613,2180,3615,2180,3617,3619,3620,2180,3623,2180,3626,3629,3630,3632,3633,3636,3637,3640,3641,3643,3644,3646],{},"A renderer receives the narrowed ",[1920,3599,3600],{},"media"," object as its ",[1920,3603,3600],{}," prop, the playback props (",[1920,3606,2668],{},[1920,3608,2713],{},[1920,3610,2727],{},[1920,3612,2730],{},[1920,3614,2733],{},[1920,3616,2736],{},[1920,3618,2739],{},"), and any fallthrough attributes (",[1920,3621,3622],{},"class",[1920,3624,3625],{},"style",[1920,3627,3628],{},"data-*",") that the call site put on ",[1920,3631,1987],{},". A video renderer gets a ",[1920,3634,3635],{},"MediaVideo","; an audio renderer gets a ",[1920,3638,3639],{},"MediaAudio",". (",[1920,3642,3060],{}," is wired only to the built-in ",[1920,3645,1979],{},"; a custom renderer owns its own playback state.)",[1917,3648,3649,3650,3652,3653,3656,3657,3660],{},"The playback props arrive unresolved: you get the ",[1920,3651,2668],{}," mode plus whichever overrides were explicitly set, not the expanded attribute cluster. Map them onto your player yourself, or run them through the exported ",[1920,3654,3655],{},"resolvePlayback"," helper (",[1920,3658,3659],{},"#ui-kit/components/Media/resolvePlayback",") to get the same mode-default-plus-override precedence the built-in players use.",[1917,3662,3663,3664,1980,3667,3670,3671,3674,3675,3677,3678,3681,3682,3684,3685,3687],{},"Declare the playback props you want to honor and map them onto your player. The ",[1920,3665,3666],{},"MediaVideoProps",[1920,3668,3669],{},"MediaAudioProps"," types from ",[1920,3672,3673],{},"#ui-kit/components/Media/types"," bundle the playback props with a single-type ",[1920,3676,3600],{}," prop; a renderer that handles both types declares ",[1920,3679,3680],{},"MediaPlaybackProps"," alongside its own ",[1920,3683,3600],{}," union (as in the example below). Any playback prop you do not declare falls through as an attribute onto your renderer's root element, so a player with its own UI should declare ",[1920,3686,2713],{}," and decide what to do with it rather than let the native attribute land on the root.",[1917,3689,3690,3691,3696,3697,3435],{},"Here is a video renderer that wraps ",[1990,3692,3695],{"href":3693,"rel":3694},"https://vidstack.io",[3052],"Vidstack",", typed with ",[1920,3698,3666],{},[2067,3700,3703],{"className":2069,"code":3701,"filename":3702,"language":2071,"meta":2072,"style":2072},"\u003Cscript setup lang=\"ts\">\nimport type { MediaVideoProps } from '#ui-kit/components/Media/types';\n\ndefineProps\u003CMediaVideoProps>();\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cmedia-player\n    :autoplay=\"autoplay\"\n    :muted=\"muted\"\n    :loop=\"loop\"\n    :playsinline=\"playsinline\"\n  >\n    \u003Cmedia-provider>\n      \u003Csource v-for=\"source in media.sources\" :key=\"source.src\" :src=\"source.src\" />\n    \u003C/media-provider>\n    \u003Cmedia-video-layout />\n  \u003C/media-player>\n\u003C/template>\n","components/VidstackMedia.vue",[1920,3704,3705,3725,3749,3753,3768,3776,3780,3788,3795,3808,3821,3834,3847,3852,3861,3906,3915,3924,3933],{"__ignoreMap":2072},[2076,3706,3707,3709,3711,3713,3715,3717,3719,3721,3723],{"class":2078,"line":2079},[2076,3708,2083],{"class":2082},[2076,3710,2443],{"class":2086},[2076,3712,2446],{"class":2101},[2076,3714,2449],{"class":2101},[2076,3716,2105],{"class":2082},[2076,3718,2108],{"class":2082},[2076,3720,2456],{"class":2111},[2076,3722,2108],{"class":2082},[2076,3724,2090],{"class":2082},[2076,3726,3727,3729,3732,3734,3737,3739,3741,3743,3745,3747],{"class":2078,"line":2093},[2076,3728,2466],{"class":2465},[2076,3730,3731],{"class":2465}," type",[2076,3733,2469],{"class":2082},[2076,3735,3736],{"class":2472}," MediaVideoProps",[2076,3738,2476],{"class":2082},[2076,3740,2479],{"class":2465},[2076,3742,2482],{"class":2082},[2076,3744,3673],{"class":2111},[2076,3746,2487],{"class":2082},[2076,3748,2490],{"class":2082},[2076,3750,3751],{"class":2078,"line":2132},[2076,3752,2519],{"emptyLinePlaceholder":2518},[2076,3754,3755,3758,3760,3762,3764,3766],{"class":2078,"line":2515},[2076,3756,3757],{"class":2533},"defineProps",[2076,3759,2083],{"class":2082},[2076,3761,3666],{"class":3136},[2076,3763,3140],{"class":2082},[2076,3765,3143],{"class":2472},[2076,3767,2490],{"class":2082},[2076,3769,3770,3772,3774],{"class":2078,"line":2522},[2076,3771,2135],{"class":2082},[2076,3773,2443],{"class":2086},[2076,3775,2090],{"class":2082},[2076,3777,3778],{"class":2078,"line":2550},[2076,3779,2519],{"emptyLinePlaceholder":2518},[2076,3781,3782,3784,3786],{"class":2078,"line":2559},[2076,3783,2083],{"class":2082},[2076,3785,2087],{"class":2086},[2076,3787,2090],{"class":2082},[2076,3789,3790,3792],{"class":2078,"line":2564},[2076,3791,2096],{"class":2082},[2076,3793,3794],{"class":2086},"media-player\n",[2076,3796,3797,3800,3802,3804,3806],{"class":2078,"line":2573},[2076,3798,3799],{"class":2101},"    :autoplay",[2076,3801,2105],{"class":2082},[2076,3803,2108],{"class":2082},[2076,3805,2727],{"class":2111},[2076,3807,3308],{"class":2082},[2076,3809,3810,3813,3815,3817,3819],{"class":2078,"line":2593},[2076,3811,3812],{"class":2101},"    :muted",[2076,3814,2105],{"class":2082},[2076,3816,2108],{"class":2082},[2076,3818,2730],{"class":2111},[2076,3820,3308],{"class":2082},[2076,3822,3823,3826,3828,3830,3832],{"class":2078,"line":2604},[2076,3824,3825],{"class":2101},"    :loop",[2076,3827,2105],{"class":2082},[2076,3829,2108],{"class":2082},[2076,3831,2733],{"class":2111},[2076,3833,3308],{"class":2082},[2076,3835,3836,3839,3841,3843,3845],{"class":2078,"line":2614},[2076,3837,3838],{"class":2101},"    :playsinline",[2076,3840,2105],{"class":2082},[2076,3842,2108],{"class":2082},[2076,3844,2736],{"class":2111},[2076,3846,3308],{"class":2082},[2076,3848,3849],{"class":2078,"line":3247},[2076,3850,3851],{"class":2082},"  >\n",[2076,3853,3854,3856,3859],{"class":2078,"line":3287},[2076,3855,2596],{"class":2082},[2076,3857,3858],{"class":2086},"media-provider",[2076,3860,2090],{"class":2082},[2076,3862,3863,3866,3869,3872,3874,3876,3879,3881,3884,3886,3888,3891,3893,3896,3898,3900,3902,3904],{"class":2078,"line":3295},[2076,3864,3865],{"class":2082},"      \u003C",[2076,3867,3868],{"class":2086},"source",[2076,3870,3871],{"class":2101}," v-for",[2076,3873,2105],{"class":2082},[2076,3875,2108],{"class":2082},[2076,3877,3878],{"class":2111},"source in media.sources",[2076,3880,2108],{"class":2082},[2076,3882,3883],{"class":2101}," :key",[2076,3885,2105],{"class":2082},[2076,3887,2108],{"class":2082},[2076,3889,3890],{"class":2111},"source.src",[2076,3892,2108],{"class":2082},[2076,3894,3895],{"class":2101}," :src",[2076,3897,2105],{"class":2082},[2076,3899,2108],{"class":2082},[2076,3901,3890],{"class":2111},[2076,3903,2108],{"class":2082},[2076,3905,2129],{"class":2082},[2076,3907,3908,3911,3913],{"class":2078,"line":3311},[2076,3909,3910],{"class":2082},"    \u003C/",[2076,3912,3858],{"class":2086},[2076,3914,2090],{"class":2082},[2076,3916,3917,3919,3922],{"class":2078,"line":3326},[2076,3918,2596],{"class":2082},[2076,3920,3921],{"class":2086},"media-video-layout",[2076,3923,2129],{"class":2082},[2076,3925,3926,3928,3931],{"class":2078,"line":3341},[2076,3927,2607],{"class":2082},[2076,3929,3930],{"class":2086},"media-player",[2076,3932,2090],{"class":2082},[2076,3934,3935,3937,3939],{"class":2078,"line":3356},[2076,3936,2135],{"class":2082},[2076,3938,2087],{"class":2086},[2076,3940,2090],{"class":2082},[1917,3942,3943,3945,3946,3949,3950,2180,3952,3955,3956,1994],{},[1920,3944,2713],{}," is left unforwarded on purpose: Vidstack draws its own UI. A renderer reads what it needs from ",[1920,3947,3948],{},"media.sources"," (and ",[1920,3951,3416],{},[1920,3953,3954],{},"media.streaming",") and decides whether a source plays natively or needs a JavaScript player; see ",[1990,3957,3424],{"href":3423},[1917,3959,3960,3961,3963,3964,1994],{},"Sizing is not the renderer's job. Beyond ",[1920,3962,3600],{}," and the playback props, the renderer receives only fallthrough attributes; the outer box (height, aspect ratio) is set by the Block that wraps ",[1920,3965,1987],{},[2164,3967,3969],{"id":3968},"dispatch-order","Dispatch order",[1917,3971,3972,3974],{},[1920,3973,1987],{}," resolves what to render in this order:",[2680,3976,3977,3987],{},[2683,3978,3979],{},[2686,3980,3981,3984],{},[2689,3982,3983],{},"Asset",[2689,3985,3986],{},"What renders",[2697,3988,3989,3999,4012,4023],{},[2686,3990,3991,3996],{},[2702,3992,3993],{},[1920,3994,3995],{},"image",[2702,3997,3998],{},"The built-in image renderer",[2686,4000,4001,4009],{},[2702,4002,4003,1980,4005,4008],{},[1920,4004,3589],{},[1920,4006,4007],{},"audio"," with a registered renderer",[2702,4010,4011],{},"Your renderer",[2686,4013,4014,4018],{},[2702,4015,4016],{},[1920,4017,3589],{},[2702,4019,4020,4021],{},"The built-in native ",[1920,4022,1979],{},[2686,4024,4025,4029],{},[2702,4026,4027],{},[1920,4028,4007],{},[2702,4030,4020,4031],{},[1920,4032,1983],{},[1917,4034,4035],{},"A registered renderer always wins for its type; otherwise the built-in plays. There is no empty-render path: every asset resolves to a player or an image, so a page stays crawlable with no layout shift.",[1912,4037,306],{"id":4038},"api-reference",[4040,4041],"component-meta",{":name":387},[3625,4043,4044],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":2072,"searchDepth":2093,"depth":2093,"links":4046},[4047,4048,4049,4050,4059,4067,4068],{"id":1914,"depth":2093,"text":1915},{"id":2016,"depth":2093,"text":2017},{"id":2043,"depth":2093,"text":2044},{"id":2051,"depth":2093,"text":4051,"children":4052},"Sizing images with the sizes prop",[4053,4054,4056,4057],{"id":2166,"depth":2132,"text":2167},{"id":2252,"depth":2132,"text":4055},"The cmw unit",{"id":2336,"depth":2132,"text":2337},{"id":2410,"depth":2132,"text":4058},"Providing a default sizes to a subtree",{"id":2641,"depth":2093,"text":1993,"children":4060},[4061,4062,4063,4064,4065,4066],{"id":2668,"depth":2132,"text":2669},{"id":2940,"depth":2132,"text":2941},{"id":3388,"depth":2132,"text":3389},{"id":3427,"depth":2132,"text":3428},{"id":3593,"depth":2132,"text":3594},{"id":3968,"depth":2132,"text":3969},{"id":4038,"depth":2093,"text":306},{"id":4069,"text":1603,"depth":2093},"changelog",[4071],"MediaComponent","The dispatcher that renders a `Media` value. Images render through `nuxt-image`; video and audio render with built-in native players you can override.",[],{},{"name":387,"base":4076,"defaultStory":4077,"height":4078},"ui-kit-atoms-media","default","460px",{"title":4080,"description":4081},"Media | Laioutr","The dispatcher that renders a Media value through nuxt-image (images) and built-in native players (video, audio) you can override with your own renderer.",{"loc":1168,"lastmod":4083,"changefreq":4084,"priority":2079,"videos":4085,"images":4086},"2026-06-04","monthly",[],[],"hDdX4kSgiDN_2dZG_r--yCEtlbpAn51wHj5ijMFSNaY",[4089,4091],{"title":1164,"path":1165,"stem":1166,"description":4090,"children":-1},"An animated spinner indicating loading or processing state.",{"title":1171,"path":1172,"stem":1173,"description":4092,"children":-1},"A navigation bullets component",{"id":4094,"extension":4095,"meta":4096,"stem":4069,"__hash__":4123},"changelog/changelog.yml","yml",{"AlphabeticalIndex":4097,"Media":4102,"MediaComponent":4114,"SchemaCondition":4119},[4098],{"version":2647,"type":4099,"breaking":2518,"changelog":2645,"note":4100,"migration":4101},"changed","Renamed from `BrandList` and generalized beyond brands — pass any `items` and a `heading` instead of `brands`.","Import from the new component, rename the `brands` prop to `items`, and\npass `heading` explicitly — the old built-in `\"Brands\"` translation no\nlonger renders automatically.\n\n```ts\n// Before\ninterface BrandListProps {\n  brands: { name: string; href: string; count?: number }[];\n}\n\n// After\ninterface AlphabeticalIndexProps {\n  heading?: string;\n  items: { name: string; href: string; count?: number }[];\n}\n```\n",[4103,4108,4111],{"version":4104,"type":4105,"changelog":4106,"note":4107},"0.30.1","added","frontend","Added an [`audio`](/frontend/api-reference/common-types/media#mediaaudio) variant, plus [text tracks](/frontend/api-reference/common-types/media#text-tracks) and [streaming formats](/frontend/api-reference/common-types/media#streaming-formats) for video. Studio `media` fields can restrict to it with `allowedTypes: ['audio']`.",{"version":4104,"type":4099,"breaking":2518,"changelog":4106,"note":4109,"migration":4110},"`MediaVideo.preview` was renamed to `MediaVideo.poster` to match the HTML `\u003Cvideo poster>` attribute.","Rename the field on every `MediaVideo` you construct or read.\n\n```ts\n// Before\nconst video: MediaVideo = { type: 'video', sources, preview: posterImage };\n// After\nconst video: MediaVideo = { type: 'video', sources, poster: posterImage };\n```\n",{"version":4104,"type":4099,"breaking":2518,"changelog":4106,"note":4112,"migration":4113},"The `Media` union was widened to include `MediaAudio`, so `media.type` can now be `'audio'`.","Any exhaustive `switch (media.type)` without a `default` branch must add an\n`'audio'` case, or TypeScript reports a non-exhaustive switch.\n\n```ts\nswitch (media.type) {\n  case 'image': return renderImage(media);\n  case 'video': return renderVideo(media);\n  case 'audio': return renderAudio(media); // new\n}\n```\n",[4115,4117],{"version":2944,"type":4105,"changelog":2645,"note":4116},"`\u003CMedia>` gained a `playback` mode for video. `playback=\"background\"` is a one-switch decorative loop (`autoplay`, `muted`, `loop`, `playsinline`, `disablePictureInPicture` on, `controls` off); `interactive` (the default) is the native player. Each attribute still has its own overriding prop. `\u003CMedia>` now exposes `v-model:paused` so consumers render their own WCAG 2.2.2 pause control, and suppresses autoplay under reduced motion. See [Background video](/laioutr-ui/ui-kit/general/media#background-video).",{"version":2647,"type":4105,"changelog":2645,"note":4118},"`\u003CMedia>` is now a dispatcher that renders video and audio, not only images. Built-in native `\u003Cvideo>` and `\u003Caudio>` players handle progressive sources out of the box (the video `poster` and audio `cover` are shown automatically), and playback is set with props on `\u003CMedia>` (`controls`, `autoplay`, `muted`, `loop`, `playsinline`). Register a renderer with `provideMediaRenderers` to override the built-in for adaptive streaming (HLS/DASH) or a custom player UI. See [Rendering video and audio](/laioutr-ui/ui-kit/general/media#rendering-video-and-audio).",[4120],{"version":4121,"type":4105,"changelog":4106,"note":4122},"0.30.0","Field and fieldset definitions gained an optional `if` expression that hides a control in the Studio sidebar — see [Conditional visibility](/apps/app-development/schema-fields#conditional-visibility).","k0u4WLp3hrk43JZ_sEFuhcDDrcL2HMwkFYQnB0ixBq4",null,{"body":4126,"excerpt":-1},{"type":4127,"children":4128},"root",[4129],{"type":4130,"tag":1917,"props":4131,"children":4132,"position":-1},"element",{},[4133,4139,4142,4150,4154,4162,4166,4174,4177,4185,4188,4196,4199,4207,4210,4218,4221,4229,4233,4241,4245,4253,4257,4265,4269,4279],{"type":4130,"tag":1920,"props":4134,"children":4136,"position":-1},{"className":4135},[],[4137],{"type":4138,"value":1987,"position":-1},"text",{"type":4138,"value":4140,"position":4141}," gained a ",{"start":2573,"end":3356},{"type":4130,"tag":1920,"props":4143,"children":4145,"position":4149},{"className":4144},[],[4146],{"type":4138,"value":2668,"position":4147},{"start":3356,"end":4148},29,{"start":3356,"end":4148},{"type":4138,"value":4151,"position":4152}," mode for video. ",{"start":4148,"end":4153},46,{"type":4130,"tag":1920,"props":4155,"children":4157,"position":4161},{"className":4156},[],[4158],{"type":4138,"value":2949,"position":4159},{"start":4153,"end":4160},69,{"start":4153,"end":4160},{"type":4138,"value":4163,"position":4164}," is a one-switch decorative loop (",{"start":4160,"end":4165},103,{"type":4130,"tag":1920,"props":4167,"children":4169,"position":4173},{"className":4168},[],[4170],{"type":4138,"value":2727,"position":4171},{"start":4165,"end":4172},113,{"start":4165,"end":4172},{"type":4138,"value":2180,"position":4175},{"start":4172,"end":4176},115,{"type":4130,"tag":1920,"props":4178,"children":4180,"position":4184},{"className":4179},[],[4181],{"type":4138,"value":2730,"position":4182},{"start":4176,"end":4183},122,{"start":4176,"end":4183},{"type":4138,"value":2180,"position":4186},{"start":4183,"end":4187},124,{"type":4130,"tag":1920,"props":4189,"children":4191,"position":4195},{"className":4190},[],[4192],{"type":4138,"value":2733,"position":4193},{"start":4187,"end":4194},130,{"start":4187,"end":4194},{"type":4138,"value":2180,"position":4197},{"start":4194,"end":4198},132,{"type":4130,"tag":1920,"props":4200,"children":4202,"position":4206},{"className":4201},[],[4203],{"type":4138,"value":2736,"position":4204},{"start":4198,"end":4205},145,{"start":4198,"end":4205},{"type":4138,"value":2180,"position":4208},{"start":4205,"end":4209},147,{"type":4130,"tag":1920,"props":4211,"children":4213,"position":4217},{"className":4212},[],[4214],{"type":4138,"value":2739,"position":4215},{"start":4209,"end":4216},172,{"start":4209,"end":4216},{"type":4138,"value":2740,"position":4219},{"start":4216,"end":4220},177,{"type":4130,"tag":1920,"props":4222,"children":4224,"position":4228},{"className":4223},[],[4225],{"type":4138,"value":2713,"position":4226},{"start":4220,"end":4227},187,{"start":4220,"end":4227},{"type":4138,"value":4230,"position":4231}," off); ",{"start":4227,"end":4232},194,{"type":4130,"tag":1920,"props":4234,"children":4236,"position":4240},{"className":4235},[],[4237],{"type":4138,"value":2706,"position":4238},{"start":4232,"end":4239},207,{"start":4232,"end":4239},{"type":4138,"value":4242,"position":4243}," (the default) is the native player. Each attribute still has its own overriding prop. ",{"start":4239,"end":4244},294,{"type":4130,"tag":1920,"props":4246,"children":4248,"position":4252},{"className":4247},[],[4249],{"type":4138,"value":1987,"position":4250},{"start":4244,"end":4251},303,{"start":4244,"end":4251},{"type":4138,"value":4254,"position":4255}," now exposes ",{"start":4251,"end":4256},316,{"type":4130,"tag":1920,"props":4258,"children":4260,"position":4264},{"className":4259},[],[4261],{"type":4138,"value":3060,"position":4262},{"start":4256,"end":4263},332,{"start":4256,"end":4263},{"type":4138,"value":4266,"position":4267}," so consumers render their own WCAG 2.2.2 pause control, and suppresses autoplay under reduced motion. See ",{"start":4263,"end":4268},439,{"type":4130,"tag":1990,"props":4270,"children":4272,"position":4277},{"href":4271},"/laioutr-ui/ui-kit/general/media#background-video",[4273],{"type":4138,"value":2941,"position":4274},{"start":4275,"end":4276},440,456,{"start":4268,"end":4278},508,{"type":4138,"value":1994,"position":4280},{"start":4278,"end":4281},509,{"body":4283,"excerpt":-1},{"type":4127,"children":4284},[4285],{"type":4130,"tag":1917,"props":4286,"children":4287,"position":-1},{},[4288,4293,4297,4305,4308,4316,4320,4328,4332,4340,4344,4352,4356,4364,4367,4375,4378,4386,4389,4397,4400,4408,4412,4420,4424,4434],{"type":4130,"tag":1920,"props":4289,"children":4291,"position":-1},{"className":4290},[],[4292],{"type":4138,"value":1987,"position":-1},{"type":4138,"value":4294,"position":4295}," is now a dispatcher that renders video and audio, not only images. Built-in native ",{"start":2573,"end":4296},93,{"type":4130,"tag":1920,"props":4298,"children":4300,"position":4304},{"className":4299},[],[4301],{"type":4138,"value":1979,"position":4302},{"start":4296,"end":4303},102,{"start":4296,"end":4303},{"type":4138,"value":2215,"position":4306},{"start":4303,"end":4307},107,{"type":4130,"tag":1920,"props":4309,"children":4311,"position":4315},{"className":4310},[],[4312],{"type":4138,"value":1983,"position":4313},{"start":4307,"end":4314},116,{"start":4307,"end":4314},{"type":4138,"value":4317,"position":4318}," players handle progressive sources out of the box (the video ",{"start":4314,"end":4319},178,{"type":4130,"tag":1920,"props":4321,"children":4323,"position":4327},{"className":4322},[],[4324],{"type":4138,"value":3039,"position":4325},{"start":4319,"end":4326},186,{"start":4319,"end":4326},{"type":4138,"value":4329,"position":4330}," and audio ",{"start":4326,"end":4331},197,{"type":4130,"tag":1920,"props":4333,"children":4335,"position":4339},{"className":4334},[],[4336],{"type":4138,"value":3404,"position":4337},{"start":4331,"end":4338},204,{"start":4331,"end":4338},{"type":4138,"value":4341,"position":4342}," are shown automatically), and playback is set with props on ",{"start":4338,"end":4343},265,{"type":4130,"tag":1920,"props":4345,"children":4347,"position":4351},{"className":4346},[],[4348],{"type":4138,"value":1987,"position":4349},{"start":4343,"end":4350},274,{"start":4343,"end":4350},{"type":4138,"value":4353,"position":4354}," (",{"start":4350,"end":4355},276,{"type":4130,"tag":1920,"props":4357,"children":4359,"position":4363},{"className":4358},[],[4360],{"type":4138,"value":2713,"position":4361},{"start":4355,"end":4362},286,{"start":4355,"end":4362},{"type":4138,"value":2180,"position":4365},{"start":4362,"end":4366},288,{"type":4130,"tag":1920,"props":4368,"children":4370,"position":4374},{"className":4369},[],[4371],{"type":4138,"value":2727,"position":4372},{"start":4366,"end":4373},298,{"start":4366,"end":4373},{"type":4138,"value":2180,"position":4376},{"start":4373,"end":4377},300,{"type":4130,"tag":1920,"props":4379,"children":4381,"position":4385},{"className":4380},[],[4382],{"type":4138,"value":2730,"position":4383},{"start":4377,"end":4384},307,{"start":4377,"end":4384},{"type":4138,"value":2180,"position":4387},{"start":4384,"end":4388},309,{"type":4130,"tag":1920,"props":4390,"children":4392,"position":4396},{"className":4391},[],[4393],{"type":4138,"value":2733,"position":4394},{"start":4388,"end":4395},315,{"start":4388,"end":4395},{"type":4138,"value":2180,"position":4398},{"start":4395,"end":4399},317,{"type":4130,"tag":1920,"props":4401,"children":4403,"position":4407},{"className":4402},[],[4404],{"type":4138,"value":2736,"position":4405},{"start":4399,"end":4406},330,{"start":4399,"end":4406},{"type":4138,"value":4409,"position":4410},"). Register a renderer with ",{"start":4406,"end":4411},358,{"type":4130,"tag":1920,"props":4413,"children":4415,"position":4419},{"className":4414},[],[4416],{"type":4138,"value":3434,"position":4417},{"start":4411,"end":4418},381,{"start":4411,"end":4418},{"type":4138,"value":4421,"position":4422}," to override the built-in for adaptive streaming (HLS/DASH) or a custom player UI. See ",{"start":4418,"end":4423},468,{"type":4130,"tag":1990,"props":4425,"children":4427,"position":4432},{"href":4426},"/laioutr-ui/ui-kit/general/media#rendering-video-and-audio",[4428],{"type":4138,"value":1993,"position":4429},{"start":4430,"end":4431},469,494,{"start":4423,"end":4433},555,{"type":4138,"value":1994,"position":4435},{"start":4433,"end":4436},556,{"data":4438,"body":4439},{},{"type":4127,"children":4440},[4441],{"type":4130,"tag":1917,"props":4442,"children":4443},{},[4444],{"type":4138,"value":4445},"Override default alt passed in media object.",{"data":4447,"body":4448},{},{"type":4127,"children":4449},[4450,4462,4474],{"type":4130,"tag":1917,"props":4451,"children":4452},{},[4453,4455,4460],{"type":4138,"value":4454},"Aspect-ratio as string in format 4:3 or 4/3. It's also possible to pass a number.\nWhen passed ",{"type":4130,"tag":1920,"props":4456,"children":4458},{"className":4457},[],[4459],{"type":4138,"value":2779},{"type":4138,"value":4461},", the element will use the images original aspect-ratio if possible.",{"type":4130,"tag":1917,"props":4463,"children":4464},{},[4465,4467,4472],{"type":4138,"value":4466},"Note that ",{"type":4130,"tag":1920,"props":4468,"children":4470},{"className":4469},[],[4471],{"type":4138,"value":2779},{"type":4138,"value":4473}," selects the first media source for calculation.",{"type":4130,"tag":1917,"props":4475,"children":4476},{},[4477],{"type":4138,"value":4478},"(Order of types has to stay as is, boolean first. Required for shorthand to work.)",{"data":4480,"body":4481},{},{"type":4127,"children":4482},[4483,4488],{"type":4130,"tag":1917,"props":4484,"children":4485},{},[4486],{"type":4138,"value":4487},"Specify responsive sizes.",{"type":4130,"tag":1917,"props":4489,"children":4490},{},[4491],{"type":4138,"value":4492},"This is a space-separated list of screen size/width pairs. Uses laioutr-ui breakpoints.",{"data":4494,"body":4495},{},{"type":4127,"children":4496},[4497,4502],{"type":4130,"tag":1917,"props":4498,"children":4499},{},[4500],{"type":4138,"value":4501},"Pass true to enable retina (2x density) images.",{"type":4130,"tag":1917,"props":4503,"children":4504},{},[4505],{"type":4138,"value":4506},"Disabled by default.",{"data":4508,"body":4509},{},{"type":4127,"children":4510},[4511],{"type":4130,"tag":1917,"props":4512,"children":4513},{},[4514],{"type":4138,"value":4515},"Specify width of the image",{"data":4517,"body":4518},{},{"type":4127,"children":4519},[4520],{"type":4130,"tag":1917,"props":4521,"children":4522},{},[4523],{"type":4138,"value":4524},"Specify height of the image",{"data":4526,"body":4527},{},{"type":4127,"children":4528},[4529,4534],{"type":4130,"tag":1917,"props":4530,"children":4531},{},[4532],{"type":4138,"value":4533},"This is a native attribute that provides a hint to the browser on how to handle the loading of an image which is outside the viewport.",{"type":4130,"tag":1917,"props":4535,"children":4536},{},[4537],{"type":4138,"value":4538},"Defaults to 'lazy' for performance reasons.",{"data":4540,"body":4541},{},{"type":4127,"children":4542},[4543],{"type":4130,"tag":1917,"props":4544,"children":4545},{},[4546,4548,4554],{"type":4138,"value":4547},"In case you want to preload the image, use this prop. This will place a corresponding ",{"type":4130,"tag":1920,"props":4549,"children":4551},{"className":4550},[],[4552],{"type":4138,"value":4553},"link",{"type":4138,"value":4555}," tag in the page's head.",{"data":4557,"body":4558},{},{"type":4127,"children":4559},[4560,4565],{"type":4130,"tag":1917,"props":4561,"children":4562},{},[4563],{"type":4138,"value":4564},"This is a native attribute that provides a hint to the browser on how to prioritize the loading of an image.",{"type":4130,"tag":1917,"props":4566,"children":4567},{},[4568,4570,4575],{"type":4138,"value":4569},"This value is also used for the ",{"type":4130,"tag":1920,"props":4571,"children":4573},{"className":4572},[],[4574],{"type":4138,"value":4553},{"type":4138,"value":4576}," header tag, when preload is used.",{"data":4578,"body":4579},{},{"type":4127,"children":4580},[4581],{"type":4130,"tag":1917,"props":4582,"children":4583},{},[4584],{"type":4138,"value":4585},"Specify the breakpoint at which the image should be displayed as a desktop image.\nCan be either a pre-defined breakpoint key (like 'lg') or a number (width in pixels).",1783259651442]