SplitSection

import '@blukavantui/web/theme.css'

import {createMediaImage} from '@blukavantui/web/media-image';
import {buttonElement} from '@blukavantui/web/button';
import {createSplitSection} from '@blukavantui/web/split-section';
import '@blukavantui/web/media-image.css';
import '@blukavantui/web/button.css';
import '@blukavantui/web/split-section.css';
export function mount(host:HTMLElement) {
 const owned:{destroy():void}[]=[];
 const keep=<T extends {destroy():void}>(c:T)=>{owned.push(c);return c;};
 const media=document.createElement("div");host.append(media);keep(createMediaImage(media,{ImageUrl:"https://blukavantui.blutekmedia.com/bluui/rich/architecture.jpg",ImageDescription:"A contemporary interior",AspectRatio:"4 / 5"}));
 const actions=document.createElement("div");const button=buttonElement({Label:"Explore the collection",Color:"Primary"},{Click:()=>{status.textContent="Connect this action to your application route.";}});actions.append(button);
 const status=document.createElement("p");status.setAttribute("role","status");
 keep(createSplitSection(host,{
  "Eyebrow": "Our approach",
  "Title": "Built around people.\nMade for what\u2019s next.",
  "Description": "A good experience feels natural. We bring strategy, design and technology together to create work that makes a difference.",
  "MediaSide": "Left",
  "Surface": "Default",
  "HeadingLevel": 2,
  "Spacing": "Comfortable"
,Media:media,Actions:actions},{Error: (message) => {status.textContent="Error: "+String(message);}}));host.append(status);
 return {destroy(){owned.reverse().forEach(c=>c.destroy());status.remove();}};
}

const instance = mount(document.getElementById('example')!)

// When this page or framework component is removed:
// instance.destroy()