/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
import "./index.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { useCallback } from 'react';
import { Box } from '@atlaskit/primitives/compiled';
var styles = {
  wrapper: "_c71lidpf _p12fidpf _kqswstnw"
};
/**
 * A wrapper component that prevents click events from propagating to parent elements.
 *
 * This component is commonly used within modals or overlays to prevent unintended
 * interactions with parent handlers when users interact with nested content.
 *
 */
export var StopPropagation = function StopPropagation(_ref) {
  var children = _ref.children;
  var onClick = useCallback(function (e) {
    // Prevent click events from bubbling up
    e.stopPropagation();
  }, []);
  return /*#__PURE__*/React.createElement(Box, {
    as: "span",
    role: "none",
    xcss: styles.wrapper,
    onClick: onClick
  }, children);
};