https://www.veranda.com/_assets/fre/scopes/hdm/_next/static/chunks…/hearst-design-system-1e739f833755bddf.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[13809],{42061:(e,a,t)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/demos/hearst-design-system",function(){return t(59024)}])},57590:e=>{e.exports={variantTable:"hearst-design-system-table_variantTable__QCPIH",variantTableWrapper:"hearst-design-system-table_variantTableWrapper__gzbrC",tableHeader:"hearst-design-system-table_tableHeader__ZZ5xA",componentNameCell:"hearst-design-system-table_componentNameCell__WweNl",previewCell:"hearst-design-system-table_previewCell__ovXBW",modifyCell:"hearst-design-system-table_modifyCell__lgA_r",imageCell:"hearst-design-system-table_imageCell__beohz",imageWrapper:"hearst-design-system-table_imageWrapper__Hr79N",cardWrapper:"hearst-design-system-table_cardWrapper__IDeDS",chipWrapper:"hearst-design-system-table_chipWrapper__KoDi2",variantSelect:"hearst-design-system-table_variantSelect__bM4OE"}},59024:(e,a,t)=>{"use strict";t.r(a),t.d(a,{__N_SSP:()=>P,default:()=>S});var s=t(39812),r=t(6529),l=t(57590),i=t.n(l),n=t(9954);function o({children:e}){return(0,n.Y)("section",{className:i().section},(0,n.Y)(r.E,{as:"h2",size:"lg",className:i().sectionHeader},"Token Theme Variants"),(0,n.Y)("div",{className:i().variantTableWrapper},(0,n.Y)("table",{className:i().variantTable},(0,n.Y)("thead",null,(0,n.Y)("tr",null,(0,n.Y)("th",{className:i().tableHeader},"Component"),(0,n.Y)("th",{className:i().tableHeader},"Preview"),(0,n.Y)("th",{className:i().tableHeader},"Variants"))),(0,n.Y)("tbody",null,e))))}var m=t(71055),p=t(22011);function d(){let{0:e,1:a}=(0,m.useState)("primary");return(0,n.Y)("tr",null,(0,n.Y)("td",{className:i().componentNameCell},(0,n.Y)(r.E,{size:"sm",as:"code"},"Chip")),(0,n.Y)("td",{className:i().previewCell},(0,n.Y)("div",{className:i().chipWrapper},(0,n.Y)(p.A,{size:"md",label:"Label",variant:e,isDismissible:!0}))),(0,n.Y)("td",{className:i().modifyCell},(0,n.Y)("select",{value:e,onChange:e=>a(e.target.value),className:i().variantSelect},(0,n.Y)("option",{value:"primary"},"Primary"),(0,n.Y)("option",{value:"neutral"},"Neutral"))))}var h=t(4860);function c(){let{0:e,1:a}=(0,m.useState)("primary-solid");return(0,n.Y)("tr",null,(0,n.Y)("td",{className:i().componentNameCell},(0,n.Y)(r.E,{size:"sm",as:"code"},"Button")),(0,n.Y)("td",{className:i().previewCell},(0,n.Y)("div",{className:i().chipWrapper},(0,n.Y)(h.$,{"aria-label":"Button",size:"md",variant:e},"Button"))),(0,n.Y)("td",{className:i().modifyCell},(0,n.Y)("select",{value:e,onChange:e=>a(e.target.value),className:i().variantSelect},(0,n.Y)("option",{value:"primary-solid"}," Primary Solid"),(0,n.Y)("option",{value:"primary-outlined"},"Primary Outlined"),(0,n.Y)("option",{value:"primary-transparent"},"Primary Transparent"),(0,n.Y)("option",{value:"secondary-solid"},"Secondary Solid"),(0,n.Y)("option",{value:"neutral-outlined"},"Neutral Outlined"),(0,n.Y)("option",{value:"neutral-transparent"},"Neutral Transparent"))))}var u=t(9895);function g(){let{0:e,1:a}=(0,m.useState)("primary");return(0,n.Y)("tr",null,(0,n.Y)("td",{className:i().componentNameCell},(0,n.Y)(r.E,{size:"sm",as:"code"},"Badge")),(0,n.Y)("td",{className:i().previewCell},(0,n.Y)(u.E,{variant:e},"Badge Component")),(0,n.Y)("td",{className:i().modifyCell},(0,n.Y)("select",{value:e,onChange:e=>a(e.target.value),className:i().variantSelect},(0,n.Y)("option",{value:"primary"},"Primary"),(0,n.Y)("option",{value:"neutral-dark"},"Neutral Dark"),(0,n.Y)("option",{value:"neutral-light"},"Neutral Light"),(0,n.Y)("option",{value:"knockout"},"Knockout"),(0,n.Y)("option",{value:"success"},"Success"),(0,n.Y)("option",{value:"danger"},"Danger"),(0,n.Y)("option",{value:"warning"},"Warning"),(0,n.Y)("option",{value:"highlight"},"Highlight"))))}var Y=t(46413);function y(){return(0,n.Y)("tr",null,(0,n.Y)("td",{className:i().componentNameCell},(0,n.Y)(r.E,{size:"sm",as:"code"},"Image")),(0,n.Y)("td",{className:i().previewCell},(0,n.Y)("div",{className:i().imageWrapper},(0,n.Y)(Y._,{src:"https://hips.hearstapps.net/hmg-prod/images/cherry-blossom-tree-blooms-by-central-park-royalty-free-image-1586830107.jpg",alt:"NYC Cherry Blossom Tree Blooms by Central Park Reservoir",aspectRatio:"1 / 1",fit:"

1contain"}))))}var _=t(75500),b=t(2110),v=t.n(b);function f(){return(0,n.Y)("tr",null,(0,n.Y)("td",{className:i().componentNameCell},(0,n.Y)(r.E,{size:"sm",as:"code"},"Box")),(0,n.Y)("td",{className:i().previewCell},(0,n.Y)("div",{className:i().cardWrapper},(0,n.Y)(_.a,{display:"flex",flexDirection:"row",gap:"--dim-space-xs"},(0,n.Y)(v(),{src:"https://hips.hearstapps.net/hmg-prod/images/cherry-blossom-tree-blooms-by-central-park-royalty-free-image-1586830107.jpg",alt:"NYC Cherry Blossom Tree Blooms by Central Park Reservoir",width:100,height:100,style:{objectFit:"cover",aspectRatio:"1 / 1"},unoptimized:!0}),(0,n.Y)(_.a,{display:"flex",flexDirection:"column"},(0,n.Y)(r.E,{as:"h2",size:"2xs"},"Grid Item Box Pattern Title"),(0,n.Y)(r.E,{as:"span",size:"xs"},"and Author Name"))))))}var N=t(63202);let x={width:"100%",height:"auto",display:"block",aspectRatio:"4 / 3",objectFit:"cover"};function C(){return(0,n.Y)("tr",null,(0,n.Y)("td",{className:i().componentNameCell},(0,n.Y)(r.E,{size:"sm",as:"code"},"Carousel")),(0,n.Y)("td",{className:i().previewCell},(0,n.Y)(N.F,{header:"Carousel Header",arrowPosition:"middle",itemsPerView:4,gap:"xs",showIndicator:!0},(0,n.Y)(_.a,{display:"flex",flexDirection:"column"},(0,n.Y)(v(),{src:"https://hips.hearstapps.net/hmg-prod/images/cherry-blossom-tree-blooms-by-central-park-royalty-free-image-1586830107.jpg",alt:"Cherry blossom trees by Central Park",width:300,height:225,style:x,unoptimized:!0}),(0,n.Y)(r.E,{as:"h3",size:"md",weight:"bold"},"Box 1")),(0,n.Y)(_.a,{display:"flex",flexDirection:"column"},(0,n.Y)(v(),{src:"https://hips.hearstapps.net/hmg-prod/images/nature-quotes-landscape-1648265299.jpg",alt:"Nature landscape",width:300,height:225,style:x,unoptimized:!0}),(0,n.Y)(r.E,{as:"h3",size:"md",weight:"bold"},"Box 2")),(0,n.Y)(_.a,{display:"flex",flexDirection:"column"},(0,n.Y)(v(),{src:"https://hips.hearstapps.net/hmg-prod/images/cherry-blossom-tree-blooms-by-central-park-royalty-free-image-1586830107.jpg",alt:"Cherry blossom trees by Central Park",width:300,height:225,style:x,unoptimized:!0}),(0,n.Y)(r.E,{as:"h3",size:"md",weight:"bold"},"Box 3")),(0,n.Y)(_.a,{display:"flex",flexDirection:"column"},(0,n.Y)(v(),{src:"https://hips.hearstapps.net/hmg-prod/images/nature-quotes-landscape-1648265299.jpg",alt:"Nature landscape",width:300,height:225,style:x,unoptimized:!0}),(0,n.Y)(r.E,{as:"h3",size:"md",weight:"bold"},"Box 4")),(0,n.Y)(_.a,{display:"flex",flexDirection:"column"},(0,n.Y)(v(),{src:"https://hips.hearstapps.net/hmg-prod/images/cherry-blossom-tree-blooms-by-central-park-royalty-free-image-1586830107.jpg",alt:"Cherry blossom trees by Central Park",width:300,height:225,style:x,unoptimized:!0}),(0,n.Y)(r.E,{as:"h3",size:"md",weight:"bold"},"Box 5")),(0,n.Y)(_.a,{display:"flex",flexDirection:"column"},(0,n.Y)(v(),{src:"https://hips.hearstapps.net/hmg-prod/images/nature-quotes-landscape-1648265299.jpg",alt:"Nature landscape",width:300,height:225,style:x,unoptimized:!0}),(0,n.Y)(r.E,{as:"h3",size:"md",weight:"bold"},"Box 6")),(0,n.Y)(_.a,{display:"flex",flexDirection:"column"},(0,n.Y)(v(),{src:"https://hips.hearstapps.net/hmg-prod/images/cherry-blossom-tree-blooms-by-central-park-royalty-free-image-1586830107.jpg",alt:"Cherry blossom trees by Central Park",width:300,height:225,style:x,unoptimized:!0}),(0,n.Y)(r.E,{as:"h3",size:"md",weight:"bold"},"Box 7")),(0,n.Y)(_.a,{display:"flex",flexDirection:"column"},(0,n.Y)(v(),{src:"https://hips.hearstapps.net/hmg-prod/images/nature-quotes-landscape-1648265299.jpg",alt:"Nature landscape",width:300,height:225,style:x,unoptimized:!0}),(0,n.Y)(r.E,{as:"h3",size:"md",weight:"bold"},"Box 8")))))}var w=t(82386);let k=({children:e,variant:a})=>(0,n.Y)("div",{style:{backgroundColor:"knockout"===a?"#292929":"transparent",padding:"1rem",borderRadius:"4px"}},e);function z(){let{0:e,1:a}=(0,m.useState)(1),{0:t,1:s}=(0,m.useState)(10),{0:l,1:o}=(0,m.useState)("default"),{0:p,1:d}=(0,m.useState)("md");return(0,n.Y)("tr",null,(0,n.Y)("td",{className:i().componentNameCell},(0,n.Y)(r.E,{size:"sm",as:"code"},"Pagination")),(0,n.Y)("td",{className:i().previewCell},(0,n.Y)("div",{className:i().chipWrapper},(0,n.Y)(k,{variant:l},(0,n.Y)(w.A,{currentPage:e,totalPages:t,onPageChange:e=>{a(e)},variant:l,size:p})))),(0,n.Y)("td",{className:i().modifyCell},(0,n.Y)("div",{style:{display:"flex",flexDirection:"column",gap:"0.75rem"}},(0,n.Y)("label",{style:{fontSize:"12px",fontWeight:500}}

1,"Variant:",(0,n.Y)("select",{value:l,onChange:e=>o(e.target.value),className:i().variantSelect,style:{marginLeft:"0.5rem",width:"140px"}},(0,n.Y)("option",{value:"default"},"Default"),(0,n.Y)("option",{value:"knockout"},"Knockout"))),(0,n.Y)("label",{style:{fontSize:"12px",fontWeight:500}},"Size:",(0,n.Y)("select",{value:p,onChange:e=>d(e.target.value),className:i().variantSelect,style:{marginLeft:"0.5rem",width:"140px"}},(0,n.Y)("option",{value:"sm"},"Small"),(0,n.Y)("option",{value:"md"},"Medium"))),(0,n.Y)("label",{style:{fontSize:"12px",fontWeight:500}},"Current Page:",(0,n.Y)("input",{type:"number",min:"1",max:t,value:e,onChange:e=>{let s=parseInt(e.target.value,10);s>=1&&s<=t&&a(s)},style:{marginLeft:"0.5rem",padding:"0.25rem",width:"60px",border:"1px solid #dee2e6",borderRadius:"4px"}})),(0,n.Y)("label",{style:{fontSize:"12px",fontWeight:500}},"Total Pages:",(0,n.Y)("input",{type:"number",min:"1",value:t,onChange:t=>{let r=parseInt(t.target.value,10);r>=1&&(s(r),e>r&&a(r))},style:{marginLeft:"0.5rem",padding:"0.25rem",width:"60px",border:"1px solid #dee2e6",borderRadius:"4px"}})))))}var B=t(97080),E=t.n(B),P=!0;function S(){return(0,n.Y)("main",{className:`${E()["hds-do-not-use"]} ${E().container}`},(0,n.Y)("header",null,(0,n.Y)(r.E,{as:"h1",size:"2xl"},"Hearst Design System Components"),(0,n.Y)("section",{className:E().infoBox,"aria-labelledby":"validation-info"},(0,n.Y)(r.E,{as:"h2",size:"lg",className:E().infoBoxTitle,id:"validation-info"},"FRE Integration Validation"),(0,n.Y)(r.E,{className:E().infoBoxParagraph},"This page validates that Hearst Design System (HDS) components and styles integrate correctly within the FRE platform. It verifies that component variants render as expected in a controlled environment."),(0,n.Y)(r.E,{className:E().infoBoxParagraph},(0,n.Y)(r.E,{as:"strong"},"For full component documentation, visit:"),(0,n.Y)("br",null),(0,n.Y)(s.N,{href:"https://hearst-design-system.kubefeature.hearstapps.net/",target:"_blank"},"https://hearst-design-system.kubefeature.hearstapps.net/")),(0,n.Y)(r.E,{className:E().infoBoxNote},"This page reflects brand-specific tokens based on the URL domain. Currently supported brands include Delish, Prevention, and Redbook."))),(0,n.Y)(o,null,(0,n.Y)(c,null),(0,n.Y)(d,null),(0,n.Y)(g,null),(0,n.Y)(y,null),(0,n.Y)(f,null),(0,n.Y)(C,null),(0,n.Y)(z,null)))}},76956:()=>{},97080:e=>{e.exports={"hds-do-not-use":"hearst-design-system_hds-do-not-use__dz8rI",container:"hearst-design-system_container__XXqgd",infoBox:"hearst-design-system_infoBox__GIXao",infoBoxTitle:"hearst-design-system_infoBoxTitle__6peLV",infoBoxParagraph:"hearst-design-system_infoBoxParagraph__Fv8dv",infoBoxLink:"hearst-design-system_infoBoxLink__Pb8n6",infoBoxNote:"hearst-design-system_infoBoxNote__SC53P",warningBox:"hearst-design-system_warningBox__qFlRq",section:"hearst-design-system_section__6C0T4",sectionHeader:"hearst-design-system_sectionHeader__RtLAK",componentRow:"hearst-design-system_componentRow__m4P5a",componentColumn:"hearst-design-system_componentColumn__z84Ll",inlineLinkParagraph:"hearst-design-system_inlineLinkParagraph__NjyRR",darkBackground:"hearst-design-system_darkBackground__YG_Ze",cardContainer:"hearst-design-system_cardContainer__fqO0E",imageContainer:"hearst-design-system_imageContainer__H8JjE"}}},e=>{e.O(0,[8142,46593,90636,38792],()=>e(e.s=42061)),_N_E=e.O()}]);