(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[16763],{79298:(s,e,n)=>{"use strict";n.d(e,{A:()=>t});let t=(0,n(31928).I)("code")({name:"InlineCode",class:"i165vvr1",propsAsIs:!1});n(87585)},85633:(s,e,n)=>{"use strict";n.d(e,{A:()=>c});var t=n(87687);n(52751);let c=function(s){return(0,t.jsx)("svg",{viewBox:"0 0 14 22",fill:"none",xmlns:"http://www.w3.org/2000/svg",...s,children:(0,t.jsx)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M9.00225 2C4.03169 2 0 6.02944 0 11C0 15.9706 4.03169 20 9.00225 20H11.5C13.7503 20 14 22 14 22V0.5C14 0.5 13 2 11.5 2H9.00225ZM9 15C11.2091 15 13 13.2091 13 11C13 8.79086 11.2091 7 9 7C6.79086 7 5 8.79086 5 11C5 13.2091 6.79086 15 9 15Z",fill:"white"})})}},97349:(s,e,n)=>{"use strict";n.d(e,{A:()=>r});var t=n(87687);n(52751);let c=(0,n(31928).I)("svg")({name:"Svg",class:"s4f6bxv",propsAsIs:!1}),r=function(s){let{}=s;return(0,t.jsx)(c,{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"100%",fill:"none",viewBox:"0 0 100 200",children:(0,t.jsx)("path",{d:"\n          M 50 0\n          C 120 66\n            0 132\n            50 200\n        "})})};n(56793)},16763:(s,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>B});var t=n(87687),c=n(52751),r=n(31928),i=n(54729),l=n(79298),o=n(99800),a=n(54631),p=n(97349),d=n(85633),x=n(78922);let h=(0,r.I)("div")({name:"Wrapper",class:"w160czso",propsAsIs:!1}),u=(0,r.I)("div")({name:"Row",class:"rpw7k9g",propsAsIs:!1}),j=(0,r.I)("span")({name:"Prefix",class:"p13uaedf",propsAsIs:!1}),m=(0,r.I)("input")({name:"Input",class:"ib1moik",propsAsIs:!1}),v=(0,r.I)("span")({name:"Value",class:"v1c0wzl0",propsAsIs:!1}),w=function(s){let{title:e,setTitle:n}=s;return(0,t.jsxs)(h,{children:["{",(0,t.jsxs)(u,{children:[(0,t.jsx)(j,{children:"  title: "}),(0,t.jsx)(m,{value:e,onChange:s=>n(s.target.value)}),","]}),(0,t.jsxs)(u,{children:[(0,t.jsx)(j,{children:"  startsAt: "}),(0,t.jsx)(v,{children:'"2023-05-29T16:00:00Z"'}),","]}),(0,t.jsxs)(u,{children:[(0,t.jsx)(j,{children:"  duration: "}),(0,t.jsx)(v,{children:"4"}),","]}),(0,t.jsxs)(u,{children:[(0,t.jsx)(j,{children:"  confirmed: "}),(0,t.jsx)(v,{children:"true"}),","]}),"}"]})};n(23912);let g=(0,r.I)("div")({name:"Wrapper",class:"wxk2tu2",propsAsIs:!1}),f=(0,r.I)("div")({name:"Label",class:"l414m5q",propsAsIs:!1}),I=(0,r.I)("span")({name:"Prefix",class:"pg6hhl9",propsAsIs:!1}),A=(0,r.I)("div")({name:"WireWrapper",class:"w1qocun",propsAsIs:!1}),k=(0,r.I)("div")({name:"MobileWireWrapper",class:"mrwxmm7",propsAsIs:!1}),y=(0,r.I)(x.A)({name:"FloatingPadlock",class:"f3uaqxt",propsAsIs:!0}),C=(0,r.I)(x.A)({name:"MobilePadlock",class:"mt6k19c",propsAsIs:!0}),b=(0,r.I)("div")({name:"ChoicesWrapper",class:"cxavaas",propsAsIs:!1}),q=(0,r.I)("label")({name:"Choice",class:"csp1sj4",propsAsIs:!1}),z=(0,r.I)("div")({name:"Background",class:"b1mqlisv",propsAsIs:!1}),S=(0,r.I)("div")({name:"ChoiceLabel",class:"c1pezb7r",propsAsIs:!1}),W=(0,r.I)(d.A)({name:"BackHook",class:"b12nzijw",propsAsIs:!0}),R=(0,r.I)(W)({name:"FrontHook",class:"f172yidi",propsAsIs:!0}),B=function(s){let{codeOutput:e}=s,n=c.useId(),[r,d]=c.useState("Change me!"),[x,h]=c.useState("pristine"),u=c.useRef({}),j=function(s){let{status:e,title:n}=s,t="const event = {\n  title: 'Change me!',\n  startsAt: '2023-05-29T16:00:00Z',\n  duration: 4,\n  confirmed: true,\n};";return"dirty"===e&&(t="".concat(t,'\n\nevent.title = "').concat(n,'"')),t}({status:x,title:r});return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(g,{children:[(0,t.jsxs)(f,{children:[(0,t.jsx)(I,{children:"const"}),"event"]}),(0,t.jsxs)(A,{children:[(0,t.jsx)(a.A,{choiceRefs:u,choiceIndex:0,connectionStyle:"locked"}),(0,t.jsx)(y,{})]}),(0,t.jsxs)(k,{children:[(0,t.jsx)(p.A,{}),(0,t.jsx)(C,{})]}),(0,t.jsx)(b,{children:(0,t.jsxs)(q,{ref:s=>{u.current[0]=s},htmlFor:"choice-".concat(n),children:[(0,t.jsx)(z,{children:(0,t.jsx)(W,{})}),(0,t.jsx)(S,{children:(0,t.jsx)(w,{title:r,setTitle:s=>{d(s),h("dirty")}})}),(0,t.jsx)(R,{})]})})]}),(0,t.jsxs)(i.A,{children:[(0,t.jsxs)("strong",{children:["You can edit the ",(0,t.jsx)(l.A,{children:"title"})," property."]})," ","This is equivalent to the following JS code:"]}),(0,t.jsx)(o.A,{lang:"js",code:j,children:e})]})};n(68031)},78922:(s,e,n)=>{"use strict";n.d(e,{A:()=>r});var t=n(87687),c=n(52751);let r=function(s){let e=c.useId(),n="linear-gradient-".concat(e).replace(/:/g,"");return(0,t.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"30",fill:"none",viewBox:"0 0 24 30",...s,children:[(0,t.jsx)("rect",{width:"21",height:"17",x:"1.5",y:"11.5",fill:"url(#".concat(n,")"),stroke:"var(--color-gray-700)",strokeWidth:"3",rx:"2.5"}),(0,t.jsx)("path",{stroke:"var(--color-gray-700)",strokeWidth:"3",d:"M6 11V7.5C6 4.462 8.686 2 12 2s6 2.462 6 5.5V11"}),(0,t.jsx)("defs",{children:(0,t.jsxs)("linearGradient",{id:n,x1:"24",x2:"0",y1:"20",y2:"20",gradientUnits:"userSpaceOnUse",children:[(0,t.jsx)("stop",{stopColor:"hsl(50deg 100% 80%)"}),(0,t.jsx)("stop",{offset:"0.5",stopColor:"hsl(50deg 100% 70%)"}),(0,t.jsx)("stop",{offset:"1",stopColor:"hsl(50deg 100% 80%)"})]})})]})}},54631:(s,e,n)=>{"use strict";n.d(e,{A:()=>p});var t=n(87687),c=n(52751),r=n(31928),i=n(59341),l=n(68852),o=n(82310);let a=(0,r.I)("svg")({name:"Svg",class:"s1wq5k0m",propsAsIs:!1}),p=function(s){let{choiceRefs:e,choiceIndex:n,connectionStyle:r="centered",dependency:p=[]}=s,d=(0,o.A)(),[x,h]=c.useState(""),u=c.useRef(null);return c.useEffect(()=>{var s;let t=null===(s=e.current)||void 0===s?void 0:s[n];if(!t||!u.current)return;let c=u.current.getBoundingClientRect(),i=t.getBoundingClientRect(),o=c.left-4,a={x:0,y:"centered"===r?c.height/2:90},p={x:i.left-o-16,y:"centered"===r?i.top-c.top+i.height/2-2:i.top-c.top+26},d=(0,l.S8)(n,0,Object.keys(e.current).length,2,-2),x=(0,l.S8)(n,0,Object.keys(e.current).length,20,-20),j=.5*c.width;h("\n      M ".concat(a.x," ").concat(a.y+d,"\n      C ").concat(a.x+j," ").concat(a.y+x,"\n        ").concat(p.x-j," ").concat(p.y-30,"\n        ").concat(p.x," ").concat(p.y,"\n      Q ").concat(p.x+6," ").concat(p.y+4,"\n        ").concat(p.x-2," ").concat(p.y+8,"\n      C ").concat(p.x-8," ").concat(p.y+12,"\n        ").concat(p.x-22," ").concat(p.y,"\n        ").concat(p.x-3," ").concat(p.y-3,"\n    "))},[n,e,r,d.width,p]),(0,t.jsx)(a,{xmlns:"http://www.w3.org/2000/svg",ref:u,width:"100%",height:"100%",fill:"none",children:x&&(0,t.jsx)(i.P.path,{animate:{d:x},transition:{type:"spring",damping:10,stiffness:100}})})};n(49731)},23912:s=>{s.exports={w160czso:"w160czso",rpw7k9g:"rpw7k9g",p13uaedf:"p13uaedf",ib1moik:"ib1moik",v1c0wzl0:"v1c0wzl0"}},56793:s=>{s.exports={s4f6bxv:"s4f6bxv"}},68031:s=>{s.exports={wxk2tu2:"wxk2tu2",l414m5q:"l414m5q",pg6hhl9:"pg6hhl9",w1qocun:"w1qocun",mrwxmm7:"mrwxmm7",f3uaqxt:"f3uaqxt",mt6k19c:"mt6k19c",cxavaas:"cxavaas",csp1sj4:"csp1sj4",b1mqlisv:"b1mqlisv",c1pezb7r:"c1pezb7r",b12nzijw:"b12nzijw",f172yidi:"f172yidi"}},49731:s=>{s.exports={s1wq5k0m:"s1wq5k0m"}}}]);
//# sourceMappingURL=16763.c72c7848804dc6fa.js.map