https://www.diezminutos.es/_assets/fre/scopes/hdm/_next/static/chu…/demos/theme-system-b9ad6f89c3f31a05.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[76040],{34220:(e,t,r)=>{"use strict";r.d(t,{A:()=>p});var n=r(93682),o=r(53520),i=r(7751),l=r(93225),s=r(71055),c=r(37717),a=r(68014),u=r.n(a);let h=["children","theme","pageId","useFocus"];function b(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,n)}return r}let d=u()(()=>r.e(80429).then(r.bind(r,80429)),{id:"c38b8c0",loadableGenerated:{webpack:()=>[80429]}}),p=function(e){let{children:t,theme:r,pageId:a="default",useFocus:u=()=>({focusModal:()=>{},unfocusModal:()=>{}})}=e,p=(0,o.A)(e,h),m=(0,c.o)(),g=m?.get("themeEditor");m?.get("localTheme");let y=g||""===g,{0:f,1:O}=(0,s.useState)(y?r:null),w=y&&f||r;if(!w)throw Error("Theme is empty. Please check the theming service. Falling back to default would cause unstyled pages");return(0,i.FD)(i.FK,{children:[y?(0,i.Y)(d,function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?b(Object(r),!0).forEach(function(t){(0,n.A)(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):b(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}({pageId:a,themeConfigs:r?.details??{},onSetTheme:O,theme:r,filter:g,useFocus:u},p)):null,(0,i.Y)(l.a,{theme:w,children:t})]})}},42493:(e,t,r)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/demos/theme-system",function(){return r(65968)}])},65968:(e,t,r)=>{"use strict";r.r(t),r.d(t,{__N_SSP:()=>N,default:()=>M});var n=r(38536),o=r(28270),i=r(34220),l=r(5921),s=r(93682),c=r(7751),a=r(71055),u=r(82511);function h(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,n)}return r}function b(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?h(Object(r),!0).forEach(function(t){(0,s.A)(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):h(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}let d=(0,a.createContext)(null);function p({sx:e,children:t}){let r=(0,a.useContext)(d),n=(0,a.useMemo)(()=>b(b({},r),e),[r,e]);return(0,c.Y)(d.Provider,{value:n,children:t})}function m(e,t={}){let r=(0,a.useContext)(d);if(!e)return r;let n=(0,u.J)(r,e,r);return n instanceof Function?n(t):n}var g=r(9954);function y(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,n)}return r}let f=(0,n.A)("h2",{target:"e16honih0"})((0,o.Ay)("h2"),";");function O(e){let t=m("grand-child",e),r=(0,a.useMemo)(()=>(function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?y(Object(r),!0).forEach(function(t){(0,s.A)(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):y(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e})({color:"white"},t),[t]);return(0,g.Y)(f,{sx:r},"This inherits from the top level component")}var w=r(71055);let v=(0,n.A)("h1",{target:"eje7w760"})((0,o.Ay)("h1"),";");function _(){let e=m("child"),{0:t,1:r}=(0,a.useState)(!1);return(0,g.Y)(w.Fragment,null,(0,g.Y)(v,{sx:e},"This is the Child component"),(0,g.Y)(O,{changeColor:t}),(0,g.Y)("button",{type:"button",onClick:function(){r(!t)}},"Update grand child"))}let j={child:{color:"blue"}};function Y(){return(0,g.Y)(p,{sx:j},(0,g.Y)(_,null))}let x={"grand-child":({changeColor:e})=>({bg:e?"purple":"brown"})};function P(){return(0,g.Y)(p,{sx:x},(0,g.Y)(Y,null))}let A={colors:{apple:"notRed",notRed:"blue",coffee:"purple",monoA:"#4740AA",monoB:"#B1ACFD",monoC:"#6A60FC",monoD:"#58557D",monoE:"#554DC9"},space:{example:"5rem"},sizes:{base:16,custom:.7,withObject:{_:.2,xxs:.5,xs:"custom"}}

1,variants:{primary:{width:"20rem",height:"31rem",bg:"apple",color:"white",_merge:!1},secondary:{bg:"coffee"},tertiary:{width:"25rem",height:"5rem",bg:"pink"},nested:{width:"30rem",height:"5rem",variant:"nested-2"},"nested-2":{height:"10rem",bg:"monoA"}},styles:{section:{width:"35rem",bg:"brown",color:"white",variant:"secondary"},"default-subsection":{height:"40rem",bg:"pink",_defaults:!0},"limited-subsection":{bg:"yellow",_merge:!1},"limited-subsection-by-variant":{bg:"yellow",variant:"primary"},subsection:{width:"withArray",bg:"yellow",margin:"example"},example:{backgroundColor:"bgCustomBreakpoints",minWidth:"20rem",maxWidth:"40rem",margin:"2rem auto 4rem",padding:"2rem",textAlign:"center"}}},k=(0,n.A)("div",{target:"e17r382k3"})((0,o.Ay)("section"),";"),D=(0,l.A)(k,{__themeKey:"subsection"}),C=(0,o.Ay)("limited-subsection"),E=(0,n.A)("div",{target:"e17r382k2"})(""),S=(0,n.A)("p",{target:"e17r382k1"})(C," ",E,"{",C.sx({bg:"darkgreen",color:"navajowhite",__themeKey:!1}),";}"),K=(0,o.Ay)("subsection"),T=(0,n.A)(k,{target:"e17r382k0"})(K.sx({border:"1px solid {*colors.notRed}",color:"black",width:"100%"}),";");function F({component:e}){return(0,g.Y)(e,null," passed in component ")}var N=!0;function M(){return(0,g.Y)(i.A,{theme:A},(0,g.Y)(F,{component:T}),(0,g.Y)(k,null,"Hey there!"),(0,g.Y)(k,{sx:{height:{_:"17px",md:"27px",lg:"37px"}},__themeKey:!1},"This will be different"),(0,g.Y)(k,{sx:{height:.2},__themeKey:"default-subsection"},"This will merge style overrides as defaults"),(0,g.Y)(k,{sx:{height:.2},__themeKey:"limited-subsection"},"This will not have the inline height"),(0,g.Y)(k,{sx:{height:.2},__themeKey:"limited-subsection-by-variant"},"This will have only the primary variant contents"),(0,g.Y)(k,{sx:{variant:["secondary","tertiary"]},__themeKey:!1},"With multiple variants"),(0,g.Y)(k,{sx:{variant:"nested"},__themeKey:!1},"With nested variants"),(0,g.Y)(D,null,"With Margin!"),(0,g.Y)(D,{__themeKey:null},"Reverting to parent style overrides"),(0,g.Y)("br",null),(0,g.Y)(D,{__themeKey:!1},"Disabling style overrides"),(0,g.Y)("br",null),(0,g.Y)(k,{sx:{height:.2,"&:hover":{width:5}}},"Increase width on hover"),(0,g.Y)(k,{sx:{[S]:{width:5,color:"purple",bg:"lightblue"}}},(0,g.Y)(S,null,"Override child styles from parent",(0,g.Y)(E,null,"and more."))),(0,g.Y)(k,{sx:{"--bg:color":"notRed"}},(0,g.Y)(S,{sx:{backgroundColor:"var(--bg, {coffee})"},__themeKey:!1},"Using CSS variables to override")),(0,g.Y)(P,null))}}},e=>{e.O(0,[46593,90636,38792],()=>e(e.s=42493)),_N_E=e.O()}]);