https://www.elledecor.com/_assets/fre/scopes/hdm/_next/static/chun…/demos/design-system-98034d62a925e59d.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[46441],{3337:(e,t,i)=>{"use strict";i.r(t),i.d(t,{__N_SSP:()=>O,default:()=>_});var r=i(1873),o=i(53520),n=i(93682),s=i(38536),a=i(71055),l=i(28270),c=i(34220);let h=(0,s.A)("div",{target:"enl5iiv0"})((0,l.Ay)("section"),";"),m=(0,s.A)("div",{target:"e1wl09yq0"})((0,l.Ay)("example"),";");var p=i(9954);let u=["children"];function d(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),i.push.apply(i,r)}return i}let g=function(e){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{};t%2?d(Object(i),!0).forEach(function(t){(0,n.A)(e,t,i[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):d(Object(i)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(i,t))})}return e}({colors:{apple:"notRed",notRed:"blue",coffee:"purple",monoA:"#4740AA",monoB:"#B1ACFD",monoC:"#6A60FC",monoD:"#58557D",monoE:"#554DC9",bgCustomBreakpoints:{_:"yellow",bps:[{options:{size:["xxs"],device:"desktop"},value:"monoA"},{options:{size:["xs:sm"],device:"desktop"},value:"monoB"},{options:{size:["md"],device:"desktop"},value:"monoC"},{options:{size:["lg:xlg"],device:"desktop"},value:"monoD"},{options:{size:["xxlg"],device:"desktop"},value:"monoE"}]}},space:{example:"5rem"},sizes:{base:16,custom:.7,withObject:{_:.2,xxs:.5,xs:"custom"},withCustomBreakpoints:{_:"auto",bps:[{options:"xxs",value:"300px"},{options:{size:["xs:sm"],device:"mobile"},value:"40rem"}]}},variants:{primary:{width:"20rem",height:"31rem",bg:"apple",_merge:!1},secondary:{bg:"coffee"}},styles:{section:{width:"35rem",bg:"brown",color:"white",variant:"secondary"},"limited-subsection":{bg:"yellow",_merge:!1},"limited-subsection-by-variant":{bg:"yellow",variant:"primary"},subsection:{width:"withObject",height:"withObject",bg:"yellow",margin:"example"},example:{backgroundColor:"bgCustomBreakpoints",minWidth:"20rem",maxWidth:"40rem",margin:"2rem auto 4rem",padding:"2rem",textAlign:"center"}}},{fonts:{primary:"Radiant, Helvetica, sans-serif",secondary:"Radiant W01",general:"Apercu, Helvetica, Arial, sans-serif",tertiary:"Charter, Optima, Arial, sans-serif"},fontFamilies:{Radiant:!0,"Radiant W01":!0,Apercu:{variants:["weight:bold"]},Charter:{family:"Charter",variants:["style:italic"]}}}),b=(0,s.A)("div",{target:"erw6tkn3"})((0,l.Ay)("section"),";"),y=(0,s.A)("section",{target:"erw6tkn2"})((0,l.Ay)("section"),";"),f=(0,a.forwardRef)((e,t)=>{let{children:i}=e,n=(0,o.A)(e,u);return(0,p.Y)(b,(0,r.A)({ref:t,__themeKey:"subsection"},n),i)});f.displayName="Subsection";let v=(0,l.Ay)("limited-subsection"),w=(0,s.A)("div",{target:"erw6tkn1"})(""),x=(0,s.A)("p",{target:"erw6tkn0"})(v," ",w,"{",v.sx({bg:"darkgreen",color:"navajowhite",__themeKey:!1}),";}");var O=!0;function _(){return(0,p.Y)(c.A,{theme:g},(0,p.Y)(m,{__themeKey:"example"},"using custom breakpoints to change background color"),(0,p.Y)(h,{sx:{fontFamily:"primary"},priority:"high"},"This is font usage demo 1"),(0,p.Y)(h,{sx:{fontFamily:"general"},priority:"high"},"This is font usage demo 2"),(0,p.Y)(h,{sx:{fontFamily:"general",fontWeight:"bold"}},"This is font usage demo 3"),(0,p.Y)(h,{sx:{fontFamily:"tertiary",fontStyle:"italic"}},"This is font usage demo 4"),(0,p.Y)(h,{sx:{fontFamily:"tertiary"}},"This is font usage demo 5"),(0,p.Y)(h,{sx:{fontFamily:"secondary"}},"This is font usage demo 6"),(0,p.Y)(b,{sx:{height:"withCustomBreakpoints"}},"Hey there!"),(0,p.Y)(b,{sx:{color:{sm:"tomato",nope:"teal"}},__themeKey:!1},"Bye there!"),(0,p.Y)(b,{sx:{height:.2},__themeKey:"subsection"},"This will be different"),(0,p.Y)(b,{sx:{height:.2},__themeKey:"limited-subsection"},"This will not have the inline height"),(0,p.Y)(b,{sx:{height:.2},__themeKey:"limited-subsection-by-variant"},"This will have only the primary variant contents"),(0,p.Y)(f,null,"With Margin!"),(0,p.Y)(f,{__themeKey:null},"Reverting to parent style overrides"),(0,p.Y)("br",null),(0,p.Y)(f,{__themeKey:!1},"Disabling style overrides"),(0,p.Y)("br",null),(0,p.Y)(b,{sx:{height:.2,"&:hover":{width:5}}},"Increase width on hover"),(0,p.Y)(b,{sx:{height:.2,bps:[{options:"xxs",value:{width:3.5,bg:"apple","&:hover":{bg:"red"}}}]}},"Example with consolidated sx props in bps key"),(0,p.Y)(b,{sx:{[x]:{width:5,color:"purple",bg:"lightblue"}}},(0,p.Y)(x,null,"Override child styles from parent",(0,p.Y)(w,null,"and more."))),(0,p.Y)(y,{sx:{padding:"{example} {0.5}"}},"Example replacing scale macros"))}},23135:(e,t,i)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/demos/design-system",function(){return i(3337)}])},34220:(e,t,i)=>{"use strict";i.d(t,{A:()=>d});var r=i(93682),o=i(53520),n=i(7751),s=i(93225),a=i(71055),l=i(37717),c=i(68014),h=i.n(c);let m=["children","theme","pageId","useFocus"];function p(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),i.push.apply(i,r)}return i}let u=h()(()=>i.e(80429).then(i.bind(i,80429)),{id:"c38b8c0",loadableGenerated:{webpack:()=>[80429]}}),d=function(e){let{children:t,theme:i,pageId:c="default",useFocus:h=()=>({focusModal:()=>{},unfocusModal:()=>{}})}=e,d=(0,o.A)(e,m),g=(0,l.o)(),b=g?.get("themeEditor");g?.get("localTheme");let y=b||""===b,{0:f,1:v}=(0,a.useState)(y?i:null),w=y&&f||i;if(!w)throw Error("Theme is empty. Please check the theming service. Falling back to default would cause unstyled pages");return(0,n.FD)(n.FK,{children:[y?(0,n.Y)(u,function(e){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{};

1t%2?p(Object(i),!0).forEach(function(t){(0,r.A)(e,t,i[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):p(Object(i)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(i,t))})}return e}({pageId:c,themeConfigs:i?.details??{},onSetTheme:v,theme:i,filter:b,useFocus:h},d)):null,(0,n.Y)(s.a,{theme:w,children:t})]})}}},e=>{e.O(0,[46593,90636,38792],()=>e(e.s=23135)),_N_E=e.O()}]);