1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[619,773,4681],{619:(e,l,s)=>{"use strict";s.r(l),s.d(l,{IconIconographicNavigationHome:()=>i});var a=s(6029);let i=(0,s(55729).forwardRef)((e,l)=>{let{className:s=""}=e;return(0,a.jsx)("svg",{ref:l,width:"24",height:"24",viewBox:"0 0 24 24",className:s,"aria-hidden":!0,fill:"none",children:(0,a.jsx)("path",{d:"M11.3271 2.61211C11.7085 2.26536 12.2915 2.26536 12.6729 2.61211L23 11.9998H20V20.9998C20 21.5521 19.5523 21.9998 19 21.9998H5C4.44772 21.9998 4 21.5521 4 20.9998V11.9998H1L11.3271 2.61211Z",fill:"currentColor"})})});i.displayName="IconIconographicNavigationHome"},34364:(e,l,s)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/helix-components",function(){return s(78175)}])},39822:(e,l,s)=>{"use strict";s.d(l,{A:()=>a.A});var a=s(48684)},40773:(e,l,s)=>{"use strict";s.r(l),s.d(l,{IconIconographicNavigationShow:()=>i});var a=s(6029);let i=(0,s(55729).forwardRef)((e,l)=>{let{className:s=""}=e;return(0,a.jsxs)("svg",{ref:l,width:"24",height:"24",viewBox:"0 0 24 24",className:s,"aria-hidden":!0,fill:"none",children:[(0,a.jsx)("path",{d:"M11.8184 9C13.4752 9 14.8184 10.3431 14.8184 12C14.8184 13.6569 13.4752 15 11.8184 15C10.1616 14.9998 8.81836 13.6568 8.81836 12C8.81836 10.3432 10.1616 9.00016 11.8184 9Z",fill:"currentColor"}),(0,a.jsx)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M11.8184 3C17.2105 3 21.6972 6.87976 22.6377 12C21.6972 17.1202 17.2105 21 11.8184 21C6.42631 20.9999 1.94049 17.1201 1 12C1.94049 6.87986 6.42631 3.00014 11.8184 3ZM11.8184 7C9.05704 7.00016 6.81836 9.23868 6.81836 12C6.81836 14.7613 9.05704 16.9998 11.8184 17C14.5798 17 16.8184 14.7614 16.8184 12C16.8184 9.23858 14.5798 7 11.8184 7Z",fill:"currentColor"})]})});i.displayName="IconIconographicNavigationShow"},46866:(e,l,s)=>{"use strict";s.d(l,{A:()=>a.A});var a=s(73783)},48684:(e,l,s)=>{"use strict";s.d(l,{A:()=>u});var a=s(6029);s(55729);var i=s(81278),t=s(31153),c=s.n(t),r=s(95669),n=s.n(r);let o={title:"Het huismerk voor energie, internet en mobiel | Budget Thuis",description:"Budget Thuis, het huismerk voor Energie, Internet en Mobiel. Kies je bewust voor Budget Thuis? Dan kies je voor kwaliteit \xe9n betaalbaarheid.",ogTitle:"Het huismerk voor energie, internet en mobiel | Budget Thuis",ogDescription:"Budget Thuis, het huismerk voor Energie, Internet en Mobiel. Kies je bewust voor Budget Thuis? Dan kies je voor kwaliteit \xe9n betaalbaarheid.",image:"".concat(c().BASE_URL,"/images/logo-budget.svg"),imageWidth:"600",imageHeight:"600"},d=e=>{var l,s,t,r,d,u,x,h,m,p,f;let{meta:j,title:v,routeDomain:g}=e,b=(0,i.useRouter)(),N=(e=>{switch(e){case"energie":return"Energie van Budget Thuis";case"internet":return"Internet van Budget Thuis";case"mobiel":return"Mobiel van Budget Thuis";default:return"Budget Thuis"}})(g),y=null==j||null==(t=j.ogImageSecureUrl)||null==(s=t.fields)||null==(l=s.file)?void 0:l.url,w=y?"https:".concat(y):o.image;return(0,a.jsxs)(n(),{children:[(0,a.jsx)("title",{children:null!=(d=null!=(r=null!=v?v:null==j?void 0:j.title)?r:null==j?void 0:j.ogTitle)?d:o.title}),(0,a.jsx)("meta",{property:"og:site_name",content:N}),(0,a.jsx)("meta",{property:"og:type",content:"website"}),(0,a.jsx)("meta",{property:"og:title",content:null!=(u=null!=v?v:null==j?void 0:j.ogTitle)?u:o.ogTitle}),(0,a.jsx)("meta",{property:"og:description",content:null!=(x=null==j?void 0:j.ogDescription)?x:o.ogDescription}),(0,a.jsx)("meta",{property:"og:image",content:w}),(0,a.jsx)("meta",{property:"og:image:secure_url",content:w}),(0,a.jsx)("meta",{property:"og:image:width",content:null!=(h=null==j?void 0:j.imageWidth)?h:o.imageWidth}),(0,a.jsx)("meta",{property:"og:image:height",content:null!=(m=null==j?void 0:j.imageHeight)?m:o.imageHeight}),(0,a.jsx)("meta",{property:"og:url",content:"".concat(c().BASE_URL).concat(b.asPath)}),(0,a.jsx)("meta",{property:"title",content:null!=(p=null==j?void 0:j.title)?p:o.title}),(0,a.jsx)("meta",{name:"description",content:null!=(f=null==j?void 0:j.description)?f:o.description}),(null==j?void 0:j.canonicalUrl)&&(0,a.jsx)("link",{rel:"canonical",href:j.canonicalUrl}),(0,a.jsx)("meta",{property:"url",content:"".concat(c().BASE_URL).concat(b.asPath)}),(null==j?void 0:j.noIndex)&&(0,a.jsx)("meta",{name:"robots",content:"noindex"}),(null==j?void 0:j.twitterCard)&&(0,a.jsx)("meta",{property:"twitter:card",content:null==j?void 0:j.twitterCard}),(null==j?void 0:j.twitterDomain)&&(0,a.jsx)("meta",{property:"twitter:domain",content:null==j?void 0:j.twitterDomain}),(null==j?void 0:j.twitterUrl)&&(0,a.jsx)("meta",{property:"twitter:url",content:null==j?void 0:j.twitterUrl}),(null==j?void 0:j.twitterTitle)&&(0,a.jsx)("meta",{property:"twitter:title",content:null==j?void 0:j.twitterTitle}),(null==j?void 0:j.twitterDescription)&&(0,a.jsx)("meta",{property:"twitter:description",content:null==j?void 0:j.twitterDescription}),(null==j?void 0:j.twitterImage)&&(0,a.jsx)("meta",{property:"twitter:image",content:null==j?void 0:j.twitterImage})]})},u=e=>{let{children:l,meta:s,title:t}=e,c=(0,i.useRouter)(),r=(e=>null==e?void 0:e.split("/")[1])((null==s?void 0:s.slug)||(null==c?void 0:c.asPath));return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(d,{meta:s,title:t,routeDomain:r}),l]})}},73783:(e,l,s)=>{"use strict";s.d(l,{A:()=>t});var a=s(6029),i=s(2276);let t=e=>{let{children:l,innerWrapperClassName:s="",style:t={},className:c="",id:r="",ariaLabel:n,ariaLabelledby:o}=e;return(0,a.jsx)("section",{id:r,style:t,className:(0,i.Q)("flex w-full justify-center ".concat(c)),"aria-label":o?void 0:n,"aria-labelledby":o,children:(0,a.jsx)("div",{className:(0,i.Q)("flex flex-1 flex-col gap-2 sm:gap-4 md:gap-6",s),children:l})})}},78175:(e,l,s)=>{"use strict";s.r(l),s.d(l,{default:()=>q});var a=s(6029),i=s(55729),t=s(48177),c=s(39822),r=s(46866),n=s(80381),o=s(24718),d=s(79479),u=s(93176),x=s(86310),h=s(20846),m=s(30563),p=s(77904),f=s(32618),j=s(5739),v=s(55559),g=s(50756),b=s(35846),N=s(79163),y=s(2535),w=s(6039),T=s(10303),C=s(6198),k=s(64848),V=s(70347),E=s(57545),L=s(680),I=s(26750),S=s(47093),A=s(52644);let D={start:"items-start",center:"items-center",end:"items-end"},B=e=>{let{label:l,align:s="center",className:i,"aria-describedby":t,...c}=e;return(0,a.jsx)(m.S,{...c,label:l,className:i,labelClassName:D[s],"aria-describedby":t})};var P=s(40773),R=s(61966),z=s(619),O=s(87441),H=s(29699),J=s(82203),U=s.n(J);let M=["sm","md","lg"],X=[{variant:"cta",sectionTitle:"CTA buttons",labelPrefix:"CTA Button"},{variant:"primary",sectionTitle:"Primary buttons",labelPrefix:"Primary Button"},{variant:"secondary",sectionTitle:"Secondary buttons",labelPrefix:"Secondary Button"},{variant:"borderless",sectionTitle:"Borderless buttons",labelPrefix:"Borderless Button"},{variant:"inline",sectionTitle:"Inline buttons",labelPrefix:"Inline Button"},{variant:"destructivePrimary",sectionTitle:"Destructive primary buttons",labelPrefix:"Destructive P"},{variant:"destructiveSecondary",sectionTitle:"Destructive secondary buttons",labelPrefix:"Destructive S"}],_=["accordion","avatar","button","checkbox","helix-ui-checkbox","checkcard","radio","radiocard","toggle","togglecard","label","tooltip","usp","divider","stepper","price","sidepeek","counter","datepicker","textlink","dropdown","textinput","proposition-card-order"],q=()=>{let[e,l]=(0,i.useState)(!1),[s,D]=(0,i.useState)("1"),[J,q]=(0,i.useState)(""),[F,Q]=(0,i.useState)(!1),[$,K]=(0,i.useState)(!1),[G,W]=(0,i.useState)(""),[Y,Z]=(0,i.useState)(!1),[ee,el]=(0,i.useState)(0),es=(0,i.useCallback)(()=>{window.scrollTo({top:0,behavior:"smooth"})},[]);(0,i.useEffect)(()=>{let e=()=>{l(window.scrollY>320)};return e(),window.addEventListener("scroll",e,{passive:!0}),()=>window.removeEventListener("scroll",e)},[]);let ea=[{label:"One",value:"one"},{label:"Two",value:"two"},{label:"Three",value:"three"}],ei=[{value:"one",title:"{RADIOCARD TITLE}",price:(0,a.jsx)(y.g,{isExtra:!0,price:16.99,className:"font-bold"}),children:(0,a.jsx)("div",{className:"mt-2 flex flex-col gap-1",children:["{USP CONTENT 1}","{USP CONTENT 2}","{USP CONTENT 3}"].map(e=>(0,a.jsx)(A.J,{children:e,variant:"success"},e))})},{value:"two",title:"{RADIOCARD TITLE}",description:"{PLACEHOLDER DESCRIPTION}",price:(0,a.jsx)(y.g,{isExtra:!0,price:16.99,className:"font-bold"}),promotionLabel:"{LABEL TEXT}",children:(0,a.jsx)("div",{className:"mt-2 flex flex-col gap-1",children:["{USP CONTENT 1}","{USP CONTENT 2}"].map(e=>(0,a.jsx)(A.J,{children:e,variant:"success"},e))})},{value:"three",title:"{RADIOCARD TITLE}",children:(0,a.jsx)("div",{className:"mt-2 flex flex-col gap-1",children:["{USP CONTENT 1}","{USP CONTENT 2}","{USP CONTENT 3}"].map(e=>(0,a.jsx)(A.J,{children:e,variant:"success"},e))})},{value:"four",title:"{RADIOCARD TITLE}",description:"{PLACEHOLDER DESCRIPTION}",price:(0,a.jsx)(y.g,{isExtra:!0,price:16.99,className:"font-bold"}),promotionLabel:"{LABEL TEXT}",persuasiveLabel:"{LABEL TEXT}",label:"{LABEL TEXT}",button:{label:"{BUTTON LABEL}",onClick:()=>console.log("Clicked radio card button")}}];return(0,a.jsx)(c.A,{children:(0,a.jsxs)("div",{className:"content-holder flex-1",children:[(0,a.jsxs)(r.A,{className:"head sem-surface-brand px-[30px] py-12",innerWrapperClassName:"container items-start",children:[(0,a.jsx)(t.hE,{color:"black",size:"h2",children:"Helix Components"}),(0,a.jsx)("div",{className:"flex flex-wrap gap-4",children:_.map(e=>(0,a.jsx)("div",{children:(0,a.jsx)(u.$,{variant:"secondary",size:"sm",rightIcon:P.IconIconographicNavigationShow,children:(0,a.jsx)(U(),{href:"#".concat(e),children:e})})},e))})]}),(0,a.jsxs)(r.A,{className:"regular px-[30px] py-12 sem-surface-default gap-8",innerWrapperClassName:"container items-start",children:[(0,a.jsxs)("div",{className:"flex w-full flex-col gap-4",id:"accordion",children:[(0,a.jsx)("h2",{className:"sem-surface-persuasive sem-typography-headline-on-surface-brand sem-outline-succes w-full break-words rounded py-4 text-center text-xl outline outline-2 -outline-offset-2",children:"Accordion"}),(0,a.jsxs)("div",{className:"sem-surface-screen flex w-full flex-col gap-4 p-4",children:[(0,a.jsx)("h3",{className:"text-lg",children:"Standard accordion"}),(0,a.jsxs)("div",{className:"my-8",children:[(0,a.jsx)("strong",{children:"Implementation notes:"}),(0,a.jsxs)("ul",{children:[(0,a.jsxs)("li",{children:["Setting a ",(0,a.jsx)("code",{children:"groupName"})," will make the accordion only allow 1 item to be open at a time."]}),(0,a.jsxs)("li",{children:["You can open one or more items by default by setting ",(0,a.jsx)("code",{children:"isOpen"})," to those items. Please note that this cannot be combined with the ",(0,a.jsx)("code",{children:"groupName"})," prop."]})]})]}),(0,a.jsx)("div",{className:"p-4",children:(0,a.jsxs)(o.nD,{groupName:"example-accordion",children:[(0,a.jsx)(o.As,{title:"Foo",children:"Foo content"}),(0,a.jsx)(o.As,{title:"Bar",summaryChildren:(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("span",{className:"font-semibold",children:"Bar"}),(0,a.jsx)(y.g,{isExtra:!0,price:1699,className:"ms-auto font-bold"})]}),children:"Bar content"}),(0,a.jsx)(o.As,{title:"Baz",children:"Baz content"}),(0,a.jsx)(o.As,{title:"Bold",titleClassName:"font-semibold",children:"Bold content"})]})}),(0,a.jsx)("h3",{className:"text-lg",children:"Nested accordion"}),(0,a.jsx)("div",{className:"p-4",children:(0,a.jsx)(o.nD,{children:(0,a.jsx)(o.As,{title:"Bar",summaryChildren:(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("span",{className:"font-semibold",children:"Bar"}),(0,a.jsx)(y.g,{isExtra:!0,price:1699,className:"ms-auto font-bold"})]}),children:(0,a.jsxs)(o.nD,{children:[(0,a.jsx)(o.As,{title:"Foo",children:"Foo content"}),(0,a.jsx)(o.As,{title:"Bar",summaryChildren:(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("span",{className:"font-semibold",children:"Bar"}),(0,a.jsx)(y.g,{isExtra:!0,price:1699,className:"ms-auto font-bold"})]}),children:"Bar content"}),(0,a.jsx)(o.As,{title:"Baz",children:"Baz content"}),(0,a.jsx)(o.As,{title:"Bold",titleClassName:"font-semibold",children:"Bold content"})]})})})}),(0,a.jsx)("h3",{className:"text-lg",children:"Numbered accordion"}),(0,a.jsx)("div",{className:"p-4",children:(0,a.jsxs)(o.nD,{groupName:"example-numbered-accordion",showNumbering:!0,children:[(0,a.jsx)(o.As,{title:"Foo",children:"Foo content"}),(0,a.jsx)(o.As,{title:"Bar",children:"Bar content"}),(0,a.jsx)(o.As,{title:"Baz",children:"Baz content"})]})}),(0,a.jsx)("h3",{className:"text-lg",children:"Small accordion (used in some of the receipts)"}),(0,a.jsx)("div",{className:"p-4",children:(0,a.jsxs)(o.nD,{children:[(0,a.jsx)(o.As,{title:"Foo",variant:"small",children:"Foo content"}),(0,a.jsx)(o.As,{title:"Bar",variant:"small",children:"Bar content"}),(0,a.jsx)(o.As,{title:"Baz",variant:"small",children:"Baz content"})]})})]})]}),(0,a.jsxs)("div",{className:"flex w-full flex-col items-start justify-center gap-4",id:"avatar",children:[(0,a.jsx)("h2",{className:"sem-surface-persuasive sem-typography-headline-on-surface-brand sem-outline-succes w-full break-words rounded py-4 text-center text-xl outline outline-2 -outline-offset-2",children:"Avatar"}),(0,a.jsxs)("div",{className:"sem-surface-screen flex w-full flex-col items-start justify-center gap-4 p-4",children:[(0,a.jsx)(d.e,{className:"m-4",imgUrl:"https://i.pravatar.cc/100",imgAlt:"John Doe",status:"available"}),(0,a.jsx)(d.e,{className:"m-4",imgUrl:"https://i.pravatar.cc/200",imgAlt:"Jane Doe",status:"unavailable"})]})]}),(0,a.jsxs)("div",{className:"flex w-full flex-col gap-4",id:"button",children:[(0,a.jsx)("h2",{className:"sem-surface-persuasive sem-typography-headline-on-surface-brand sem-outline-succes w-full break-words rounded py-4 text-center text-xl outline outline-2 -outline-offset-2",children:"Button"}),(0,a.jsx)("div",{className:"sem-surface-screen flex w-full flex-col items-start justify-center gap-4 p-4",children:M.flatMap(e=>X.map((l,s)=>{let t="".concat(l.labelPrefix," ").concat(e);return(0,a.jsxs)(i.Fragment,{children:[(0,a.jsx)("h3",{className:0===s?"my-2 text-lg":"text-lg",children:l.sectionTitle}),(0,a.jsxs)("div",{className:"flex w-full flex-col items-start gap-4 p-4",children:[(0,a.jsx)(u.$,{variant:l.variant,size:e,children:t}),(0,a.jsx)(u.$,{variant:l.variant,size:e,rightIcon:R.IconNavigationChevronRight,children:t}),(0,a.jsx)(u.$,{variant:l.variant,size:e,leftIcon:z.IconIconographicNavigationHome,children:t}),(0,a.jsx)(u.$,{variant:l.variant,size:e,leftIcon:z.IconIconographicNavigationHome,rightIcon:R.IconNavigationChevronRight,children:t}),(0,a.jsx)(u.$,{variant:l.variant,size:e,subLabel:"subLabel",disabled:!0,leftIcon:z.IconIconographicNavigationHome,rightIcon:R.IconNavigationChevronRight,children:t}),(0,a.jsx)(u.$,{variant:l.variant,size:e,subLabel:"subLabel",className:"w-full",contentAlignment:"default",leftIcon:z.IconIconographicNavigationHome,rightIcon:R.IconNavigationChevronRight,children:t}),(0,a.jsx)(u.$,{variant:l.variant,size:e,subLabel:"subLabel",className:"w-full",contentAlignment:"center",children:t})]})]},"".concat(e,"-").concat(l.variant))}))})]}),(0,a.jsxs)("div",{className:"flex w-full flex-col items-start justify-center gap-4",id:"checkbox",children:[(0,a.jsx)("h2",{className:"sem-surface-persuasive sem-typography-headline-on-surface-brand sem-outline-succes w-full break-words rounded py-4 text-center text-xl outline outline-2 -outline-offset-2",children:"Checkbox"}),(0,a.jsxs)("div",{className:"sem-surface-screen flex w-full flex-col items-start justify-center gap-4 p-4",children:[(0,a.jsx)(m.S,{id:"checkbox-example-1",label:"Placeholder Title",checked:F,onChange:Q,className:"",validity:"indeterminate"}),(0,a.jsx)(m.S,{id:"checkbox-example-1",label:"Placeholder Title",checked:F,onChange:Q,className:"",validity:"valid"}),(0,a.jsx)(m.S,{id:"checkbox-example-2",label:"Placeholder Title",checked:F,onChange:Q,className:"",validity:"invalid"}),(0,a.jsx)(m.S,{disabled:!0,id:"checkbox-example-3",label:"Placeholder Title",validity:"indeterminate",checked:F,onChange:Q})]})]}),(0,a.jsxs)("div",{className:"flex w-full flex-col items-start justify-center gap-4",id:"helix-ui-checkbox",children:[(0,a.jsx)("h2",{className:"sem-surface-persuasive sem-typography-headline-on-surface-brand sem-outline-succes w-full break-words rounded py-4 text-center text-xl outline outline-2 -outline-offset-2",children:"@helix/ui/Checkbox (MySpace path)"}),(0,a.jsx)("p",{className:"sem-typography-body-on-surface-default-secondary px-4 text-sm",children:
1"Same VI26 checkbox as above, via legacy import path used in MySpace apps (no legacy sketch icons)."}),(0,a.jsxs)("div",{className:"sem-surface-screen flex w-full flex-col items-start justify-center gap-4 p-4",children:[(0,a.jsx)(B,{id:"helix-ui-checkbox-default",label:"String label",checked:$,onChange:K,required:!1}),(0,a.jsx)(B,{id:"helix-ui-checkbox-rich-label",align:"start",label:(0,a.jsx)("span",{className:"font-semibold",children:"React node label (renewal flow)"}),checked:$,onChange:K,required:!1}),(0,a.jsx)(B,{id:"helix-ui-checkbox-invalid",label:"Invalid state",validity:"invalid",checked:$,onChange:K,required:!1})]})]}),(0,a.jsxs)("div",{className:"flex w-full flex-col items-start justify-center gap-4",id:"checkcard",children:[(0,a.jsx)("h2",{className:"sem-surface-persuasive sem-typography-headline-on-surface-brand sem-outline-succes w-full break-words rounded py-4 text-center text-xl outline outline-2 -outline-offset-2",children:"CheckCard"}),(0,a.jsxs)("div",{className:"sem-surface-screen flex w-full flex-col items-start justify-center gap-4 p-4",children:[(0,a.jsx)(x.T,{id:"check-card-example-1",name:"check-card-example-1",title:"{CHECKCARD TITLE}",price:(0,a.jsx)(y.g,{isLarge:!0,price:1699,term:"mnd",className:"font-bold"}),checked:F,onChange:Q,className:""}),(0,a.jsx)(x.T,{id:"check-card-example-2",name:"check-card-example-2",title:"{CHECKCARD TITLE}",description:"{PLACEHOLDER DESCRIPTION}",promotionLabel:"{LABEL TEXT}",persuasiveLabel:"{LABEL TEXT}",label:"{LABEL TEXT}",checked:F,onChange:Q,className:""}),(0,a.jsx)(x.T,{id:"check-card-example-2",name:"check-card-example-2",title:"{CHECKCARD TITLE}",description:"{PLACEHOLDER DESCRIPTION}",promotionLabel:"{LABEL TEXT}",persuasiveLabel:"{LABEL TEXT}",label:"{LABEL TEXT}",checked:F,onChange:Q,className:"",validity:"invalid"}),(0,a.jsx)(x.T,{id:"check-card-example-2",name:"check-card-example-2",title:"{CHECKCARD TITLE}",description:"{PLACEHOLDER DESCRIPTION}",promotionLabel:"{LABEL TEXT}",persuasiveLabel:"{LABEL TEXT}",label:"{LABEL TEXT}",checked:F,onChange:Q,className:"",validity:"valid"}),(0,a.jsx)(x.T,{id:"check-card-example-2",name:"check-card-example-2",title:"{CHECKCARD TITLE}",description:"{PLACEHOLDER DESCRIPTION}",promotionLabel:"{LABEL TEXT}",persuasiveLabel:"{LABEL TEXT}",label:"{LABEL TEXT}",checked:F,onChange:Q,className:"",validity:"valid",disabled:!0}),(0,a.jsx)(x.T,{id:"check-card-example-4",name:"check-card-example-4",title:"{CHECKCARD TITLE}",price:(0,a.jsx)(y.g,{isExtra:!0,price:1699,className:"font-bold"}),collapsedText:"Collapsable",collapsedButton:{label:"Meer info",onClick:()=>console.log("Requested more info")},checked:F,onChange:Q,className:""}),(0,a.jsxs)(h.J,{label:"CheckCardList",columnCount:2,className:"",children:[(0,a.jsx)(x.T,{name:"check-card-list-example-1",expand:"full",title:"Check 1"}),(0,a.jsx)(x.T,{name:"check-card-list-example-2",expand:"full",title:"Check 2"}),(0,a.jsx)(x.T,{name:"check-card-list-example-3",expand:"full",title:"Check 3"})]})]})]}),(0,a.jsxs)("div",{className:"flex w-full flex-col items-start justify-center gap-4",id:"radio",children:[(0,a.jsx)("h2",{className:"sem-surface-persuasive sem-typography-headline-on-surface-brand sem-outline-succes w-full break-words rounded py-4 text-center text-xl outline outline-2 -outline-offset-2",children:"Radio"}),(0,a.jsxs)("div",{className:"sem-surface-screen flex w-full flex-col items-start justify-center gap-4 p-4",children:[(0,a.jsx)(C.q,{label:"Indeterminate radio list",name:"radio-list-example-indeterminate",options:ea,value:G,validity:"indeterminate",onChange:W,className:""}),(0,a.jsx)(C.q,{label:"Valid radio list",name:"radio-list-example",options:ea,value:G,validity:"valid",onChange:W,className:""}),(0,a.jsx)(C.q,{label:"Invalid radio list",name:"radio-list-example-invalid",options:ea,value:G,validity:"invalid",onChange:W,className:""})]})]}),(0,a.jsxs)("div",{className:"flex w-full flex-col items-start justify-center gap-4",id:"radiocard",children:[(0,a.jsx)("h2",{className:"sem-surface-persuasive sem-typography-headline-on-surface-brand sem-outline-succes w-full break-words rounded py-4 text-center text-xl outline outline-2 -outline-offset-2",children:"RadioCard"}),(0,a.jsxs)("div",{className:"sem-surface-screen flex w-full flex-col items-start justify-center gap-4 p-4",children:[(0,a.jsx)(T.A,{label:"Placeholder Title",name:"radio-card-list-example",options:ei,value:G,onChange:W,className:""}),(0,a.jsx)(T.A,{label:"Placeholder Title",name:"radio-card-list-example-2-columns",options:ei,columnCount:2,disabled:!0,validity:"valid",value:G,onChange:W,className:""}),(0,a.jsxs)(T.A,{label:"Placeholder Title",columnCount:2,value:G,onChange:W,className:"",children:[(0,a.jsx)(w.O,{name:"radio-card-list-example-children",expand:"full",value:"1",title:"Option 1"}),(0,a.jsx)(w.O,{name:"radio-card-list-example-children",expand:"full",value:"2",title:"Option 2"}),(0,a.jsx)(w.O,{name:"radio-card-list-example-children",expand:"full",value:"3",title:"Option 3"})]})]})]}),(0,a.jsxs)("div",{className:"flex w-full flex-col items-start justify-center gap-4",id:"toggle",children:[(0,a.jsx)("h2",{className:"sem-surface-persuasive sem-typography-headline-on-surface-brand sem-outline-succes w-full break-words rounded py-4 text-center text-xl outline outline-2 -outline-offset-2",children:"Toggle"}),(0,a.jsxs)("div",{className:"sem-surface-screen flex w-full flex-col items-start justify-center gap-4 p-4",children:[(0,a.jsx)(L.l,{id:"toggle-example-1",label:"Placeholder Title",checked:F,onChange:Q,className:""}),(0,a.jsx)(L.l,{id:"toggle-example-2",label:"Placeholder Title",boxSize:"md",checked:F,onChange:Q,className:""}),(0,a.jsx)(L.l,{isLoading:!0,id:"toggle-example-3",label:"Placeholder Title",boxSize:"md",checked:F,onChange:Q,className:""}),(0,a.jsx)(L.l,{id:"toggle-example-4",label:"Placeholder Title",boxSize:"md",checked:F,disabled:!0,onChange:Q,className:""})]})]}),(0,a.jsxs)("div",{className:"flex w-full flex-col items-start justify-center gap-4",id:"togglecard",children:[(0,a.jsx)("h2",{className:"sem-surface-persuasive sem-typography-headline-on-surface-brand sem-outline-succes w-full break-words rounded py-4 text-center text-xl outline outline-2 -outline-offset-2",children:"ToggleCard"}),(0,a.jsxs)("div",{className:"sem-surface-screen flex w-full flex-col items-start justify-center gap-4 p-4",children:[(0,a.jsx)(I.L,{id:"toggle-card-example-1",title:"{TOGGLECARD TITLE}",price:(0,a.jsx)(y.g,{isExtra:!0,price:16.99,className:"font-bold"}),checked:F,onChange:Q,className:""}),(0,a.jsx)(I.L,{id:"toggle-card-example-1",title:"{TOGGLECARD TITLE}",description:"{PLACEHOLDER DESCRIPTION}",price:(0,a.jsx)(y.g,{isLarge:!0,price:16.99,term:"jr",className:"font-bold"}),checked:F,onChange:Q,className:""}),(0,a.jsx)(I.L,{id:"toggle-card-example-3",title:"{TOGGLECARD TITLE}",description:"{PLACEHOLDER DESCRIPTION}",disabled:!0,checked:F,onChange:Q,className:""})]})]}),(0,a.jsxs)("div",{className:"flex w-full flex-col items-start justify-center gap-4",id:"label",children:[(0,a.jsx)("h2",{className:"sem-surface-persuasive sem-typography-headline-on-surface-brand sem-outline-succes w-full break-words rounded py-4 text-center text-xl outline outline-2 -outline-offset-2",children:"Label"}),(0,a.jsxs)("div",{className:"sem-surface-screen flex w-full flex-col items-start justify-center gap-4 p-4",children:[(0,a.jsx)(b.J,{type:"default",className:"",children:(0,a.jsx)("p",{children:"Meest gekozen"})}),(0,a.jsx)(b.J,{type:"promotion",className:"",children:(0,a.jsx)("p",{children:"Meest gekozen"})}),(0,a.jsx)(b.J,{type:"persuasive",className:"",children:(0,a.jsx)("p",{children:"Meest gekozen"})}),(0,a.jsx)(b.J,{type:"succes",className:"",children:(0,a.jsx)("p",{children:"Meest gekozen"})}),(0,a.jsx)(b.J,{type:"warning",className:"",children:(0,a.jsx)("p",{children:"Meest gekozen"})}),(0,a.jsx)(b.J,{type:"error",className:"",children:(0,a.jsx)("p",{children:"Meest gekozen"})}),(0,a.jsx)(b.J,{type:"default",className:"",size:"sm",children:(0,a.jsx)("p",{children:"Meest gekozen"})}),(0,a.jsx)(b.J,{type:"promotion",className:"",size:"sm",children:(0,a.jsx)("p",{children:"Meest gekozen"})}),(0,a.jsx)(b.J,{type:"persuasive",className:"",size:"sm",children:(0,a.jsx)("p",{children:"Meest gekozen"})}),(0,a.jsx)(b.J,{type:"succes",className:"",size:"sm",children:(0,a.jsx)("p",{children:"Meest gekozen"})}),(0,a.jsx)(b.J,{type:"warning",className:"",size:"sm",children:(0,a.jsx)("p",{children:"Meest gekozen"})}),(0,a.jsx)(b.J,{type:"error",className:"",size:"sm",children:(0,a.jsx)("p",{children:"Meest gekozen"})})]})]}),(0,a.jsxs)("div",{className:"flex w-full flex-col items-start justify-center gap-4",id:"tooltip",children:[(0,a.jsx)("h2",{className:"sem-surface-persuasive sem-typography-headline-on-surface-brand sem-outline-succes w-full break-words rounded py-4 text-center text-xl outline outline-2 -outline-offset-2",children:"Tooltip"}),(0,a.jsxs)("div",{className:"sem-surface-screen flex w-full flex-wrap gap-4 p-4",children:[(0,a.jsx)(S.m,{className:"m-4",children:"Tooltip content"}),(0,a.jsx)(S.m,{className:"m-4",variant:"inverted",children:"Very long tooltip content that should wrap to the next line and could possibly go off screen. But it needs to be long enough to be a problemf. This should not happen normally. Just a little bit of extra text to make it longer than the default max width."})]})]}),(0,a.jsxs)("div",{className:"flex w-full flex-col items-start justify-center gap-4",id:"usp",children:[(0,a.jsx)("h2",{className:"sem-surface-persuasive sem-typography-headline-on-surface-brand sem-outline-succes w-full break-words rounded py-4 text-center text-xl outline outline-2 -outline-offset-2",children:"USP"}),(0,a.jsxs)("div",{className:"sem-surface-screen flex w-full flex-col items-start justify-center gap-4 p-4",children:[(0,a.jsxs)("div",{className:"flex flex-col gap-2 p-2",children:[(0,a.jsx)(A.J,{size:"sm",variant:"primary",children:"USP text with or without"}),(0,a.jsx)(A.J,{size:"sm",variant:"success",children:"USP text with or without"}),(0,a.jsx)(A.J,{size:"sm",variant:"error",children:"USP text with or without"})]}),(0,a.jsxs)("div",{className:"flex flex-col gap-2 p-2",children:[(0,a.jsx)(A.J,{size:"md",variant:"primary",children:"USP text with or without"}),(0,a.jsx)(A.J,{size:"md",variant:"success",children:"USP text with or without"}),(0,a.jsx)(A.J,{size:"md",variant:"error",children:"USP text with or without"})]}),(0,a.jsxs)("div",{className:"sem-surface-inverted flex w-full flex-col gap-2 p-2",children:[(0,a.jsx)(A.J,{size:"sm",variant:"inverted",children:"USP text with or without"}),(0,a.jsx)(A.J,{size:"md",variant:"inverted",children:"USP text with or without"})]})]})]}),(0,a.jsxs)("div",{className:"flex w-full flex-col items-start justify-center gap-4",id:"divider",children:[(0,a.jsx)("h2",{className:"sem-surface-persuasive sem-typography-headline-on-surface-brand sem-outline-succes w-full break-words rounded py-4 text-center text-xl outline outline-2 -outline-offset-2",children:"Divider"}),(0,a.jsxs)("div",{className:"sem-surface-screen flex w-full flex-col gap-4 p-4",children:[(0,a.jsx)(j.c,{}),(0,a.jsx)(j.c,{intensity:"darker"}),(0,a.jsx)(j.c,{intensity:"lighter"})]})]}),(0,a.jsxs)("div",{className:"flex w-full flex-col items-start justify-center gap-4",id:"stepper",children:[(0,a.jsx)("h2",{className:"sem-surface-persuasive sem-typography-headline-on-surface-brand sem-outline-succes w-full break-words rounded py-4 text-center text-xl outline outline-2 -outline-offset-2",children:"Stepper"}),(0,a.jsxs)("div",{className:"sem-surface-screen flex w-full flex-col items-start justify-center gap-4 p-4",children:[(0,a.jsx)("div",{className:"sem-surface-default flex w-full flex-col gap-4 p-4",children:(0,a.jsxs)(V.C1,{currentStepIndex:ee,onStepClick:el,children:[(0,a.jsx)(V.yQ,{label:"This is step 1",value:100}),(0,a.jsx)(V.yQ,{label:"Step 2",value:30}),(0,a.jsx)(V.yQ,{label:"Step 3",value:0,disabled:!0}),(0,a.jsx)(V.yQ,{label:"Step 4",value:0,disabled:!0}),(0,a.jsx)(V.yQ,{label:"Step 5",value:0,disabled:!0})]})}),(0,a.jsx)("div",{className:"sem-surface-interactive flex w-full flex-col gap-4 p-4",children:(0,a.jsxs)(V.C1,{currentStepIndex:ee,onStepClick:el,variant:"inverted",children:[(0,a.jsx)(V.yQ,{label:"Inverted step 1",value:100}),(0,a.jsx)(V.yQ,{label:"Inverted step 2",value:30}),(0,a.jsx)(V.yQ,{label:"Inverted step 3",value:0,disabled:!0}),(0,a.jsx)(V.yQ,{label:"Inverted step 4",value:0,disabled:!0}),(0,a.jsx)(V.yQ,{label:"Inverted step 5",value:0,disabled:!0})]})})]})]}),(0,a.jsxs)("div",{className:"flex w-full flex-col items-start justify-center gap-4",id:"price",children:[(0,a.jsx)("h2",{className:"sem-surface-persuasive sem-typography-headline-on-surface-brand sem-outline-succes w-full break-words rounded py-4 text-center text-xl outline outline-2 -outline-offset-2",children:"Price"}),(0,a.jsxs)("div",{className:"sem-surface-screen flex w-full flex-col items-start justify-center gap-4 p-4",children:[(0,a.jsx)(y.g,{isLarge:!0,price:16.99,className:"mt-2"}),(0,a.jsx)(y.g,{isLarge:!0,price:299.99,decimals:2,term:"mnd",className:"mt-2 font-bold"}),(0,a.jsx)(y.g,{isLarge:!0,price:299,decimals:0,term:"mnd",className:"mt-2"}),(0,a.jsx)(y.g,{isLarge:!0,price:299.99,term:"mnd",className:"mt-2 font-bold",showCurrencySign:!1}),(0,a.jsx)(y.g,{price:24,className:"mt-2 font-bold"}),(0,a.jsx)(y.g,{isCrossed:!0,price:100,className:"mt-2"}),(0,a.jsx)(y.g,{isExtra:!0,price:16.99,className:"mt-2",term:"jr"})]})]}),(0,a.jsxs)("div",{className:"flex w-full flex-col items-start justify-center gap-4",id:"sidepeek",children:[(0,a.jsx)("h2",{className:"sem-surface-persuasive sem-typography-headline-on-surface-brand sem-outline-succes w-full break-words rounded py-4 text-center text-xl outline outline-2 -outline-offset-2",children:"SidePeek"}),(0,a.jsxs)("div",{className:"sem-surface-screen flex w-full flex-col items-start justify-center gap-4 p-4",children:[(0,a.jsx)(u.$,{onClick:()=>Z(!Y),children:"Toggle side peek example"}),(0,a.jsx)(n.f,{children:(0,a.jsx)(k.z,{title:"Title box",isOpen:Y,onClose:()=>Z(!1),children:(0,a.jsxs)("div",{className:"p-4",children:[(0,a.jsx)("h1",{children:"This is side-peek content"}),(0,a.jsx)("p",{children:"Lorem ipsum dolor sit amet"})]})})})]})]}),(0,a.jsxs)("div",{className:"flex w-full flex-col items-start justify-center gap-4",id:"counter",children:[(0,a.jsx)("h2",{className:"sem-surface-persuasive sem-typography-headline-on-surface-brand sem-outline-succes w-full break-words rounded py-4 text-center text-xl outline outline-2 -outline-offset-2",children:"Counter"}),(0,a.jsx)("div",{className:"sem-surface-screen flex w-full p-4",children:(0,a.jsxs)("div",{className:"flex w-1/2 flex-col gap-4",children:[(0,a.jsx)(p.p,{label:"Je dal stroomverbruik",helperText:"Helpertext placeholder",max:999,min:0,step:1,onChange:e=>
1D(e.target.value),onInfoClick:()=>console.log("info clicked"),value:s}),(0,a.jsx)(p.p,{label:"Je dal stroomverbruik",max:999,min:0,step:1,onChange:e=>D(e.target.value),value:s,required:!0}),(0,a.jsx)(p.p,{label:"Disabled counter",max:999,min:0,step:1,onChange:e=>D(e.target.value),value:s,disabled:!0})]})})]}),(0,a.jsxs)("div",{className:"flex w-full flex-col items-start justify-center gap-4",id:"datepicker",children:[(0,a.jsx)("h2",{className:"sem-surface-persuasive sem-typography-headline-on-surface-brand sem-outline-succes w-full break-words rounded py-4 text-center text-xl outline outline-2 -outline-offset-2",children:"Datepicker"}),(0,a.jsx)("div",{className:"sem-surface-screen flex w-full p-4",children:(0,a.jsxs)("div",{className:"flex w-1/2 flex-col gap-4",children:[(0,a.jsx)(f.l,{label:"Kies een datum",helperText:"Helpertext placeholder",value:J,onChange:e=>q(e.target.value),onInfoClick:()=>console.log("info clicked")}),(0,a.jsx)(f.l,{label:"Error Date",helperText:"Helpertext placeholder",value:J,fieldState:{invalid:!0,error:{type:"value",message:"Error text placeholder"},isTouched:!0,isDirty:!0,isValidating:!1},onChange:e=>q(e.target.value),required:!0}),(0,a.jsx)(f.l,{label:"Success date",helperText:"Helpertext placeholder",value:J,fieldState:{invalid:!1,isTouched:!0,isDirty:!0,isValidating:!1},onChange:e=>q(e.target.value)}),(0,a.jsx)(f.l,{label:"Disabled",value:J,disabled:!0,onChange:e=>q(e.target.value),onInfoClick:()=>console.log("info clicked")})]})})]}),(0,a.jsxs)("div",{className:"flex w-full flex-col items-start justify-center gap-4",id:"dropdown",children:[(0,a.jsx)("h2",{className:"sem-surface-persuasive sem-typography-headline-on-surface-brand sem-outline-succes w-full break-words rounded py-4 text-center text-xl outline outline-2 -outline-offset-2",children:"Dropdown"}),(0,a.jsx)("div",{className:"sem-surface-screen flex w-full p-4",children:(0,a.jsxs)("div",{className:"flex w-1/2 flex-col gap-4",children:[(0,a.jsxs)(v.m,{label:"Dropdown",onInfoClick:()=>console.log("info clicked"),required:!0,children:[(0,a.jsx)(N.c,{value:"1",children:"Value 1"}),(0,a.jsx)(N.c,{value:"2",children:"Value 2"}),(0,a.jsx)(N.c,{value:"3",children:"Value 3"}),(0,a.jsx)(N.c,{value:"4",children:"Value 4"}),(0,a.jsx)(N.c,{value:"5",children:"Value 5"}),(0,a.jsx)(N.c,{value:"6",children:"Value 6"}),(0,a.jsx)(N.c,{value:"7",children:"Value 7"}),(0,a.jsx)(N.c,{value:"8",children:"Value 8"}),(0,a.jsx)(N.c,{value:"9",children:"Value 9"}),(0,a.jsx)(N.c,{value:"10",children:"Value 10"}),(0,a.jsx)(N.c,{value:"11",children:"Value 11"}),(0,a.jsx)(N.c,{value:"12",children:"Value 12"}),(0,a.jsx)(N.c,{value:"13",children:"Value 13"}),(0,a.jsx)(N.c,{value:"14",children:"Value 14"}),(0,a.jsx)(N.c,{value:"15",children:"Value 15"}),(0,a.jsx)(N.c,{value:"16",children:"Value 16"}),(0,a.jsx)(N.c,{value:"17",children:"Value 17"}),(0,a.jsx)(N.c,{value:"18",children:"Value 18"}),(0,a.jsx)(N.c,{value:"19",children:"Value 19"}),(0,a.jsx)(N.c,{value:"20",children:"Value 20"})]}),(0,a.jsxs)(v.m,{label:"Dropdown",onInfoClick:()=>console.log("info clicked"),helperText:"Helpertext placeholder",children:[(0,a.jsx)(N.c,{value:"1",children:"Value1"}),(0,a.jsx)(N.c,{value:"2",children:"Value2"}),(0,a.jsx)(N.c,{value:"3",children:"Value3"}),(0,a.jsx)(N.c,{value:"4",children:"Value4"}),(0,a.jsx)(N.c,{value:"5",children:"Value5"}),(0,a.jsx)(N.c,{value:"6",children:"Value6"}),(0,a.jsx)(N.c,{value:"7",children:"Value7"}),(0,a.jsx)(N.c,{value:"8",children:"Value8"}),(0,a.jsx)(N.c,{value:"9",children:"Value9"}),(0,a.jsx)(N.c,{value:"10",children:"Value10"}),(0,a.jsx)(N.c,{value:"11",children:"Value11"}),(0,a.jsx)(N.c,{value:"12",children:"Value12"}),(0,a.jsx)(N.c,{value:"13",children:"Value13"}),(0,a.jsx)(N.c,{value:"14",children:"Value14"}),(0,a.jsx)(N.c,{value:"15",children:"Value15"}),(0,a.jsx)(N.c,{value:"16",children:"Value16"}),(0,a.jsx)(N.c,{value:"17",children:"Value17"}),(0,a.jsx)(N.c,{value:"18",children:"Value18"}),(0,a.jsx)(N.c,{value:"19",children:"Value19"}),(0,a.jsx)(N.c,{value:"20",children:"Value20"})]}),(0,a.jsxs)(v.m,{label:"Dropdown",onInfoClick:()=>
1console.log("info clicked"),fieldState:{invalid:!1,isDirty:!0,isTouched:!0,isValidating:!1},children:[(0,a.jsx)(N.c,{value:"1",children:"Value1"}),(0,a.jsx)(N.c,{value:"2",children:"Value2"}),(0,a.jsx)(N.c,{value:"3",children:"Value3"}),(0,a.jsx)(N.c,{value:"4",children:"Value4"}),(0,a.jsx)(N.c,{value:"5",children:"Value5"}),(0,a.jsx)(N.c,{value:"6",children:"Value6"}),(0,a.jsx)(N.c,{value:"7",children:"Value7"}),(0,a.jsx)(N.c,{value:"8",children:"Value8"}),(0,a.jsx)(N.c,{value:"9",children:"Value9"}),(0,a.jsx)(N.c,{value:"10",children:"Value10"}),(0,a.jsx)(N.c,{value:"11",children:"Value11"}),(0,a.jsx)(N.c,{value:"12",children:"Value12"}),(0,a.jsx)(N.c,{value:"13",children:"Value13"}),(0,a.jsx)(N.c,{value:"14",children:"Value14"}),(0,a.jsx)(N.c,{value:"15",children:"Value15"}),(0,a.jsx)(N.c,{value:"16",children:"Value16"}),(0,a.jsx)(N.c,{value:"17",children:"Value17"}),(0,a.jsx)(N.c,{value:"18",children:"Value18"}),(0,a.jsx)(N.c,{value:"19",children:"Value19"}),(0,a.jsx)(N.c,{value:"20",children:"Value20"})]}),(0,a.jsxs)(v.m,{label:"Dropdown",onInfoClick:()=>console.log("info clicked"),fieldState:{invalid:!0,isDirty:!0,isTouched:!0,isValidating:!1},children:[(0,a.jsx)(N.c,{value:"1",children:"Value1"}),(0,a.jsx)(N.c,{value:"2",children:"Value2"}),(0,a.jsx)(N.c,{value:"3",children:"Value3"}),(0,a.jsx)(N.c,{value:"4",children:"Value4"}),(0,a.jsx)(N.c,{value:"5",children:"Value5"}),(0,a.jsx)(N.c,{value:"6",children:"Value6"}),(0,a.jsx)(N.c,{value:"7",children:"Value7"}),(0,a.jsx)(N.c,{value:"8",children:"Value8"}),(0,a.jsx)(N.c,{value:"9",children:"Value9"}),(0,a.jsx)(N.c,{value:"10",children:"Value10"}),(0,a.jsx)(N.c,{value:"11",children:"Value11"}),(0,a.jsx)(N.c,{value:"12",children:"Value12"}),(0,a.jsx)(N.c,{value:"13",children:"Value13"}),(0,a.jsx)(N.c,{value:"14",children:"Value14"}),(0,a.jsx)(N.c,{value:"15",children:"Value15"}),(0,a.jsx)(N.c,{value:"16",children:"Value16"}),(0,a.jsx)(N.c,{value:"17",children:"Value17"}),(0,a.jsx)(N.c,{value:"18",children:"Value18"}),(0,a.jsx)(N.c,{value:"19",children:"Value19"}),(0,a.jsx)(N.c,{value:"20",children:"Value20"})]}),(0,a.jsxs)(v.m,{label:"Dropdown",onInfoClick:()=>console.log("info clicked"),fieldState:{invalid:!0,isDirty:!0,isTouched:!0,isValidating:!1,error:{type:"error",message:"Placeholder error message"}},children:[(0,a.jsx)(N.c,{value:"1",children:"Value1"}),(0,a.jsx)(N.c,{value:"2",children:"Value2"}),(0,a.jsx)(N.c,{value:"3",children:"Value3"}),(0,a.jsx)(N.c,{value:"4",children:"Value4"}),(0,a.jsx)(N.c,{value:"5",children:"Value5"}),(0,a.jsx)(N.c,{value:"6",children:"Value6"}),(0,a.jsx)(N.c,{value:"7",children:"Value7"}),(0,a.jsx)(N.c,{value:"8",children:"Value8"}),(0,a.jsx)(N.c,{value:"9",children:"Value9"}),(0,a.jsx)(N.c,{value:"10",children:"Value10"}),(0,a.jsx)(N.c,{value:"11",children:"Value11"}),(0,a.jsx)(N.c,{value:"12",children:"Value12"}),(0,a.jsx)(N.c,{value:"13",children:"Value13"}),(0,a.jsx)(N.c,{value:"14",children:"Value14"}),(0,a.jsx)(N.c,{value:"15",children:"Value15"}),(0,a.jsx)(N.c,{value:"16",children:"Value16"}),(0,a.jsx)(N.c,{value:"17",children:"Value17"}),(0,a.jsx)(N.c,{value:"18",children:"Value18"}),(0,a.jsx)(N.c,{value:"19",children:"Value19"}),(0,a.jsx)(N.c,{value:"20",children:"Value20"})]}),(0,a.jsxs)(v.m,{label:"Dropdown with placeholder",placeholder:"Select an option",onInfoClick:()=>console.log("info clicked"),children:[(0,a.jsx)(N.c,{value:"1",children:"Value 1"}),(0,a.jsx)(N.c,{value:"2",children:"Value 2"}),(0,a.jsx)(N.c,{value:"3",children:"Value 3"}),(0,a.jsx)(N.c,{value:"4",children:"Value 4"})]})]})})]}),(0,a.jsxs)("div",{className:"flex w-full flex-col items-start justify-center gap-4",id:"textinput",children:[(0,a.jsx)("h2",{className:"sem-surface-persuasive sem-typography-headline-on-surface-brand sem-outline-succes w-full break-words rounded py-4 text-center text-xl outline outline-2 -outline-offset-2",children:"Textinput"}),(0,a.jsx)("div",{className:"sem-surface-screen flex w-full p-4",children:(0,a.jsxs)("div",{className:"flex w-1/2 flex-col gap-4",children:[(0,a.jsx)(g.p,{label:"Text input",required:!0}
1),(0,a.jsx)(g.p,{label:"Text input",fieldState:{invalid:!1,isTouched:!0,isDirty:!0,isValidating:!1},required:!0}),(0,a.jsx)(g.p,{label:"Text input",fieldState:{invalid:!0,isTouched:!0,isDirty:!0,isValidating:!1},required:!0}),(0,a.jsx)(g.p,{label:"Text input",fieldState:{invalid:!0,isTouched:!0,isDirty:!0,isValidating:!1,error:{type:"error",message:"Error text placeholder"}},required:!0}),(0,a.jsx)(g.p,{label:"Text input",required:!0,disabled:!0}),(0,a.jsx)(g.p,{label:"Text input",helperText:"Helpertext placeholder",placeholder:"Placeholder text",onInfoClick:()=>console.log("info clicked")}),(0,a.jsx)(g.p,{label:"Text input",leadingText:"NL",trailingText:"kWh per jaar",trailingIcon:(0,a.jsx)(O.IconNavigationClose,{className:"h-6 w-6"}),helperText:"Helpertext placeholder",onInfoClick:()=>console.log("info clicked")})]})})]}),(0,a.jsxs)("div",{className:"flex w-full flex-col items-start justify-center gap-4",id:"textlink",children:[(0,a.jsx)("h2",{className:"sem-surface-persuasive sem-typography-headline-on-surface-brand sem-outline-succes w-full break-words rounded py-4 text-center text-xl outline outline-2 -outline-offset-2",children:"Textlink"}),(0,a.jsxs)("div",{className:"sem-surface-screen flex w-full flex-col gap-4 p-4",children:[(0,a.jsx)("div",{className:"sem-surface-brand flex flex-col gap-4 p-4",children:(0,a.jsx)(E.Y,{href:"https://www.google.com",variant:"brand",children:"Text link"})}),(0,a.jsxs)("div",{className:"flex flex-col gap-4 p-4",children:[" ",(0,a.jsx)(E.Y,{href:"https://www.google.com",variant:"surface",children:"Text link"})]}),(0,a.jsxs)("div",{className:"sem-surface-inverted flex flex-col gap-4 p-4",children:[" ",(0,a.jsx)(E.Y,{href:"https://www.google.com",variant:"inverted",children:"Text link"})]})]})]}),e?(0,a.jsx)(u.$,{type:"button",variant:"primary",size:"sm",leftIcon:H.IconNavigationChevronUp,className:"fixed bottom-6 right-6 z-50 shadow-lg","aria-label":"Terug naar boven",onClick:es,children:"Boven"}):null]})]})})}},80381:(e,l,s)=>{"use strict";s.d(l,{f:()=>t});var a=s(55729),i=s(56760);let t=e=>{let{children:l,selector:s="#side-peek-portal"}=e,t=(0,a.useRef)(null);return(0,a.useEffect)(()=>{t.current=document.querySelector(s)},[s]),t.current?(0,i.createPortal)(l,t.current):null}}},e=>{e.O(0,[636,6593,8792],()=>e(e.s=34364)),_N_E=e.O()}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.