{"version":3,"file":"webpack-chunks/chunk.8615.018e939cf0b105939825.js","mappings":"gMAKe,SAASA,GAAgB,MAAEC,EAAF,GAASC,EAAT,EAAaC,EAAb,EAAgBC,IACvD,MAAM,iBAAEC,EAAF,cAAoBC,EAApB,KAAmCC,IAASC,EAAAA,EAAAA,KAC5CC,GAAQC,EAAAA,EAAAA,QAAO,MACfC,GAASD,EAAAA,EAAAA,QAAO,MAChBE,EAAWN,IAAkBJ,EAYnC,OAXAW,EAAAA,EAAAA,YAAU,KACT,IAAKJ,EAAMK,UAAYH,EAAOG,QAAS,OACvC,MAAMC,EAAMJ,EAAOG,QACdF,IAAUG,EAAIC,MAAMC,MAAQ,OAEjC,MAAMC,EAAUC,WAAWhB,GAE3BY,EAAIC,MAAMC,MAAS,QAA6B,KAArB,EAAIC,EAAU,eACzCH,EAAIC,MAAMI,KAAQ,QAAOjB,YACzBY,EAAIC,MAAMK,IAAO,QAAOjB,cACtB,CAACQ,EAAUH,EAAMK,QAASX,EAAGC,IAE/B,wCACEQ,GACA,4BACCU,IAAKX,EACLY,MAAM,qFACNP,MAAO,CAAEC,MAAO,KAGlB,8BACCK,IAAKb,EACLe,QAAS,KAERnB,EAAiBH,IAElBuB,gBAAevB,EACfwB,gBAAed,EACfe,UAAWC,GAAAA,CACT,kCAAiCrB,kBAClCK,EACG,oCACA,uBACH,iCAEDI,MAAO,CACNK,IAAKjB,EACLgB,KAAMjB,IAGP,4BAAMwB,UAAU,WAAhB,oBAA4C1B,GAC5C,4BAAM0B,UAAU,gBAChB,4BAAMA,UAAU,kBClDL,SAASE,GAAoB,SAAEC,IAC7C,OACC,wCACEA,EAASC,KAAKC,GACd,oBAAChC,EAAoBgC,Q,0FCJzB,MAAMC,GAAiBC,EAAAA,EAAAA,eAAc,MAE9B,SAAS1B,IACf,MAAM2B,GAAUC,EAAAA,EAAAA,YAAWH,GAC3B,QAAgBI,IAAZF,EACH,MAAM,IAAIG,MAAM,6BAKjB,OAAOH,EAGD,SAASI,GAAgB,SAAEC,EAAF,YAAYC,EAAc,YACzD,MAAOnC,EAAeD,IAAoBqC,EAAAA,EAAAA,UAAS,OAC5CnC,EAAMoC,IAAWD,EAAAA,EAAAA,UAASD,GAE3BG,EAAQ,CACbtC,cAAAA,EACAD,iBAAmBuC,IAElBvC,EAAiBuC,IAElBrC,KAAAA,EACAoC,QAAAA,GAED,OACC,oBAACV,EAAeY,SAAhB,CAAyBD,MAAOA,GAAQJ","sources":["webpack://wfp-usa/./wp-content/themes/tombras/blocks/components/hotspot/partials/HotspotSelector.jsx","webpack://wfp-usa/./wp-content/themes/tombras/blocks/components/hotspot/components/Frontend/HotspotSelectorPanel.jsx","webpack://wfp-usa/./wp-content/themes/tombras/blocks/components/hotspot/context/index.jsx"],"sourcesContent":["import { useHotspot } from \"../context/index.jsx\";\nimport classnames from \"classnames\";\nimport { useEffect, useRef } from \"react\";\nimport { useState } from \"react\";\n\nexport default function HotspotSelector({ title, id, x, y }) {\n\tconst { setActiveHotspot, activeHotspot, size } = useHotspot();\n\tconst elRef = useRef(null);\n\tconst barRef = useRef(null);\n\tconst isActive = activeHotspot === id;\n\tuseEffect(() => {\n\t\tif (!elRef.current || !barRef.current) return;\n\t\tconst bar = barRef.current;\n\t\tif (!isActive) bar.style.width = \"0px\";\n\n\t\tconst percent = parseFloat(x);\n\t\tconsole.log(percent, percent / 100, 1 - percent / 100);\n\t\tbar.style.width = `calc(${(1 - percent / 100) * 100}% - 8px)`;\n\t\tbar.style.left = `calc(${x} + 32px)`;\n\t\tbar.style.top = `calc(${y} + 16px)`;\n\t}, [isActive, elRef.current, x, y]);\n\treturn (\n\t\t<>\n\t\t\t{isActive && (\n\t\t\t\t<span\n\t\t\t\t\tref={barRef}\n\t\t\t\t\tclass=\"hotspot-bar hidden md:block h-2 bg-primary-500 absolute -translate-y-1/2 left-full\"\n\t\t\t\t\tstyle={{ width: 0 }}\n\t\t\t\t></span>\n\t\t\t)}\n\t\t\t<button\n\t\t\t\tref={elRef}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tconsole.log(\"setting hotspot to......\", id);\n\t\t\t\t\tsetActiveHotspot(id);\n\t\t\t\t}}\n\t\t\t\taria-controls={id}\n\t\t\t\taria-expanded={isActive}\n\t\t\t\tclassName={classnames(\n\t\t\t\t\t`absolute border-4 rounded-full ${size} outline-white`,\n\t\t\t\t\tisActive\n\t\t\t\t\t\t? \"border-primary-500 primary-active\"\n\t\t\t\t\t\t: \"border-secondary-500\",\n\t\t\t\t\t\"transition-colors duration-75\",\n\t\t\t\t)}\n\t\t\t\tstyle={{\n\t\t\t\t\ttop: y,\n\t\t\t\t\tleft: x,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<span className=\"sr-only\">Learn more about {title}</span>\n\t\t\t\t<span className=\"hotspot-one\"></span>\n\t\t\t\t<span className=\"hotspot-two\"></span>\n\t\t\t</button>\n\t\t</>\n\t);\n}\n","import HotspotSelector from \"../../partials/HotspotSelector.jsx\";\n\nexport default function HotpotSelectorPanel({ hotspots }) {\n\treturn (\n\t\t<>\n\t\t\t{hotspots.map((spot) => (\n\t\t\t\t<HotspotSelector {...spot} />\n\t\t\t))}\n\t\t</>\n\t);\n}\n","import { createContext, useContext, useState } from \"react\";\n\nconst HotspotContext = createContext(null);\n\nexport function useHotspot() {\n\tconst context = useContext(HotspotContext);\n\tif (context === undefined) {\n\t\tthrow new Error(\"Hotspot context not found\");\n\t}\n\n\tconsole.log(\"context\", context);\n\n\treturn context;\n}\n\nexport function HotspotProvider({ children, defaultSize = \"h-8 w-8\" }) {\n\tconst [activeHotspot, setActiveHotspot] = useState(null);\n\tconst [size, setSize] = useState(defaultSize);\n\n\tconst value = {\n\t\tactiveHotspot,\n\t\tsetActiveHotspot: (value) => {\n\t\t\tconsole.log(\"what is the value\", value);\n\t\t\tsetActiveHotspot(value);\n\t\t},\n\t\tsize,\n\t\tsetSize,\n\t};\n\treturn (\n\t\t<HotspotContext.Provider value={value}>{children}</HotspotContext.Provider>\n\t);\n}\n"],"names":["HotspotSelector","title","id","x","y","setActiveHotspot","activeHotspot","size","useHotspot","elRef","useRef","barRef","isActive","useEffect","current","bar","style","width","percent","parseFloat","left","top","ref","class","onClick","aria-controls","aria-expanded","className","classnames","HotpotSelectorPanel","hotspots","map","spot","HotspotContext","createContext","context","useContext","undefined","Error","HotspotProvider","children","defaultSize","useState","setSize","value","Provider"],"sourceRoot":""}