{
  "version": 3,
  "sources": ["ssg:https://framer.com/m/framer/utils.js@^0.9.0", "ssg:https://framerusercontent.com/modules/G9CXfnXJROqZPghfgpks/iJqcCOBNsQNLYk921M8M/PannableDiv.js"],
  "sourcesContent": ["export const centerContent = {\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\"\n};\nexport const autoSizingText = {\n    width: \"max-content\",\n    wordBreak: \"break-word\",\n    overflowWrap: \"break-word\",\n    overflow: \"hidden\",\n    whiteSpace: \"pre-wrap\",\n    flexShrink: 0\n};\nexport const defaultContainerStyles = {\n    ...centerContent,\n    overflow: \"hidden\"\n};\nexport const containerStyles = defaultContainerStyles;\nexport const randomColor = ()=>\"#\" + Math.floor(Math.random() * 16777215).toString(16)\n;\n\nexport const __FramerMetadata__ = {\"exports\":{\"centerContent\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"containerStyles\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"autoSizingText\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"defaultContainerStyles\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"randomColor\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}}}}\n//# sourceMappingURL=./Utils.map", "import{jsx as _jsx}from\"react/jsx-runtime\";import{useEffect,useRef,forwardRef}from\"react\";import{createStore}from\"https://framer.com/m/framer/store.js@^1.0.0\";import{randomColor}from\"https://framer.com/m/framer/utils.js@^0.9.0\";// Learn more: https://www.framer.com/developers/overrides/\nconst useStore=createStore({background:\"#0099FF\"});export function withRotate(Component){return props=>{return /*#__PURE__*/_jsx(Component,{...props,animate:{rotate:90},transition:{duration:2}});};}export function withHover(Component){return props=>{return /*#__PURE__*/_jsx(Component,{...props,whileHover:{scale:1.05}});};}export function withRandomColor(Component){return props=>{const[store,setStore]=useStore();return /*#__PURE__*/_jsx(Component,{...props,animate:{background:store.background},onClick:()=>{setStore({background:randomColor()});}});};}export function withPannable(Component){return /*#__PURE__*/forwardRef((props,ref)=>{let mouseDown=false;let startX=0;let scrollLeft=0;const sliderRef=useRef(null)// Reference to the slider DOM element\n;const startDragging=e=>{mouseDown=true;startX=e.pageX-sliderRef.current.offsetLeft// Initial mouse position\n;scrollLeft=sliderRef.current.scrollLeft// Initial scroll position\n;};const stopDragging=()=>{mouseDown=false// Reset the dragging state\n;};const move=e=>{if(!mouseDown)return;// Only execute if the mouse is down\ne.preventDefault();const x=e.pageX-sliderRef.current.offsetLeft// Current mouse position\n;const scroll=x-startX// How far the mouse moved\n;sliderRef.current.scrollLeft=scrollLeft-scroll// Update scroll position\n;};useEffect(()=>{const slider=sliderRef.current;if(!slider){console.warn(\"Slider element not found.\");return;}const onMouseMove=e=>move(e);const onMouseUp=()=>stopDragging();// Attach global listeners for `mousemove` and `mouseup`\nwindow.addEventListener(\"mousemove\",onMouseMove);window.addEventListener(\"mouseup\",onMouseUp);// Attach specific listeners for `mousedown` and prevent text selection\nslider.addEventListener(\"mousedown\",startDragging);// Cleanup on unmount\nreturn()=>{window.removeEventListener(\"mousemove\",onMouseMove);window.removeEventListener(\"mouseup\",onMouseUp);slider.removeEventListener(\"mousedown\",startDragging);};},[]);// Pass the ref to the actual DOM element inside Component\nreturn /*#__PURE__*/_jsx(Component,{ref:el=>{sliderRef.current=el// Update local ref\n;if(typeof ref===\"function\"){ref(el);}else if(ref){ref.current=el;}},...props});});}\nexport const __FramerMetadata__ = {\"exports\":{\"withPannable\":{\"type\":\"reactHoc\",\"name\":\"withPannable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withRotate\":{\"type\":\"reactHoc\",\"name\":\"withRotate\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withRandomColor\":{\"type\":\"reactHoc\",\"name\":\"withRandomColor\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withHover\":{\"type\":\"reactHoc\",\"name\":\"withHover\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./PannableDiv.map"],
  "mappings": "gJAAO,IAAMA,EAAgB,CACzB,QAAS,OACT,eAAgB,SAChB,WAAY,QAChB,EASO,IAAMC,EAAyB,CAClC,GAAGC,EACH,SAAU,QACd,ECfA,IAAMC,EAASC,EAAY,CAAC,WAAW,SAAS,CAAC,EAAigB,SAASC,EAAaC,EAAU,CAAC,OAAoBC,EAAW,CAACC,EAAMC,IAAM,CAAC,IAAIC,EAAU,GAAUC,EAAO,EAAMC,EAAW,EAAQC,EAAUC,EAAO,IAAI,EACtsBC,EAAcC,GAAG,CAACN,EAAU,GAAKC,EAAOK,EAAE,MAAMH,EAAU,QAAQ,WACxED,EAAWC,EAAU,QAAQ,UAC7B,EAAQI,EAAa,IAAI,CAACP,EAAU,EACpC,EAAQQ,EAAKF,GAAG,CAAC,GAAG,CAACN,EAAU,OAChCM,EAAE,eAAe,EAChB,IAAMG,EADoBH,EAAE,MAAMH,EAAU,QAAQ,WACrCF,EACfE,EAAU,QAAQ,WAAWD,EAAWO,CACxC,EAAE,OAAAC,EAAU,IAAI,CAAC,IAAMC,EAAOR,EAAU,QAAQ,GAAG,CAACQ,EAAO,CAAC,QAAQ,KAAK,2BAA2B,EAAE,MAAO,CAAC,IAAMC,EAAYN,GAAGE,EAAKF,CAAC,EAAQO,EAAU,IAAIN,EAAa,EAC7K,OAAAO,EAAO,iBAAiB,YAAYF,CAAW,EAAEE,EAAO,iBAAiB,UAAUD,CAAS,EAC5FF,EAAO,iBAAiB,YAAYN,CAAa,EAC3C,IAAI,CAACS,EAAO,oBAAoB,YAAYF,CAAW,EAAEE,EAAO,oBAAoB,UAAUD,CAAS,EAAEF,EAAO,oBAAoB,YAAYN,CAAa,CAAE,CAAE,EAAE,CAAC,CAAC,EACvJ,EAAKT,EAAU,CAAC,IAAImB,GAAI,CAACZ,EAAU,QAAQY,EAC3D,OAAOhB,GAAM,WAAYA,EAAIgB,CAAE,EAAWhB,IAAKA,EAAI,QAAQgB,EAAI,EAAE,GAAGjB,CAAK,CAAC,CAAE,CAAC,CAAE",
  "names": ["centerContent", "defaultContainerStyles", "centerContent", "useStore", "createStore", "withPannable", "Component", "Y", "props", "ref", "mouseDown", "startX", "scrollLeft", "sliderRef", "pe", "startDragging", "e", "stopDragging", "move", "scroll", "ue", "slider", "onMouseMove", "onMouseUp", "window", "el"]
}